/* ============================================================
   Locmaq Locadora — Design System (Tokens)
   Identidade capturada ao vivo do Elementor Kit (13/07/2026):
   primary #E95E0B · secondary #061011 · accent #FFD600 · text #7A7A7A
   Montserrat (títulos) + Inter (corpo). Tema CLARO.
   Fonte canônica destes valores: o site em produção. Não editar
   sem atualizar a identidade da marca.
   ============================================================ */

:root {

    /* -------- Cores primárias -------- */
    --color-primary:          #E95E0B; /* Laranja Locmaq */
    --color-primary-dark:     #C44E08; /* laranja escurecido p/ hover */
    --color-secondary:        #061011; /* Quase-preto (fundos escuros, títulos) */
    --color-accent:           #FFD600; /* Amarelo destaque */

    /* -------- Cores neutras -------- */
    --color-dark-bg:          #061011; /* fundo escuro (hero, CTA, autor) */
    --color-dark-surface:     #14201F;
    --color-text:             #1A1A1A;
    --color-text-secondary:   #5B5B5B;
    --color-text-muted:       #7A7A7A; /* text do kit Elementor */
    --color-text-light:       #FFFFFF;
    --color-surface-light:    #FAF7F4; /* papel quente sutil */
    --color-surface:          #FFFFFF;
    --color-border:           #E7E2DC;

    /* -------- Cores funcionais -------- */
    --color-whatsapp:         #25D366;
    --color-whatsapp-bg:      #188643; /* Escurecido p/ botão com texto branco: 4.64:1. Era #1A8F47 = 4.15:1, reprovava. */
    --color-warning:          #F0A020;
    --color-error:            #D9534F;

    /* -------- Tipografia -------- */
    --font-heading:           "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body:              "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fw-regular:             400;
    --fw-medium:              500;
    --fw-semibold:            600;
    --fw-bold:                700;
    --fw-extrabold:           800;

    /* Escala desktop */
    --fs-h1:                  3.25rem;  /* 52px */
    --fs-h2:                  2.375rem; /* 38px */
    --fs-h3:                  1.75rem;  /* 28px */
    --fs-h4:                  1.375rem; /* 22px */
    --fs-h5:                  1.125rem; /* 18px */
    --fs-h6:                  1rem;     /* 16px */
    --fs-body-lg:             1.125rem; /* 18px */
    --fs-body:                1rem;     /* 16px */
    --fs-body-sm:             0.875rem; /* 14px */
    --fs-button:              1rem;
    --fs-counter:             3.75rem;  /* 60px */

    --lh-tight:               1.1;
    --lh-snug:                1.2;
    --lh-base:                1.3;
    --lh-relaxed:             1.4;
    --lh-loose:               1.65;

    /* -------- Espaçamentos (escala 8px) -------- */
    --space-xs:               4px;
    --space-sm:               8px;
    --space-md:               16px;
    --space-lg:               24px;
    --space-xl:               32px;
    --space-2xl:              48px;
    --space-3xl:              64px;
    --space-4xl:              96px;

    /* -------- Border radius -------- */
    --radius-sm:              4px;
    --radius-md:              8px;
    --radius-lg:              10px;    /* raio da marca (botões, cards) */
    --radius-xl:              16px;
    --radius-full:            9999px;

    /* -------- Sombras -------- */
    --shadow-sm:              0 1px 3px rgba(6, 16, 17, 0.06);
    --shadow-md:              0 4px 14px rgba(6, 16, 17, 0.08);
    --shadow-lg:              0 10px 25px rgba(233, 94, 11, 0.12);
    --shadow-xl:              0 20px 40px rgba(6, 16, 17, 0.14);
    --shadow-cta:             0 4px 14px rgba(233, 94, 11, 0.32);

    /* -------- Transições -------- */
    --transition-fast:        all 0.15s ease;
    --transition-base:        all 0.3s ease;
    --transition-slow:        all 0.5s ease;

    /* -------- Container -------- */
    --container-max:          1200px;
    --container-padding-x:    24px;

    /* -------- Z-index -------- */
    --z-base:                 1;
    --z-sticky:               100;
    --z-overlay:              500;
    --z-modal:                1000;
}

/* Escala tipográfica mobile (até 767px) */
@media (max-width: 767px) {
    :root {
        --fs-h1:              2.25rem;  /* 36px */
        --fs-h2:              1.875rem; /* 30px */
        --fs-h3:              1.5rem;   /* 24px */
        --fs-h4:              1.25rem;  /* 20px */
        --fs-h5:              1rem;     /* 16px */
        --fs-h6:              0.875rem; /* 14px */
        --fs-body-lg:         1rem;
        --fs-body:            0.9375rem; /* 15px */
        --fs-body-sm:         0.8125rem; /* 13px */
        --fs-counter:         2.75rem;   /* 44px */
    }
}