/* ============================================================
   Autolub Design System — Tokens
   Fonte canônica: autolub-design-system-v2.md (04/06/2026)
   Não editar diretamente sem atualizar o design system.
   ============================================================ */

:root {

    /* -------- Cores primárias -------- */
    --color-primary:          #1E3A8A; /* Autolub Blue */
    --color-secondary:        #3B82F6; /* Autolub Blue Light */
    --color-secondary-on-light: #2563EB; /* Escurecido p/ uso contra branco: 5.17:1 (AA exige 4.5). O --color-secondary #3B82F6 da 3.68:1 e reprovava. Conferir com fd_impeccable.py antes de mexer. */
    --color-bright:           #60A5FA; /* Autolub Blue Bright */
    --color-accent:           #FBE5A0; /* NenêLub Cream */

    /* -------- Cores neutras -------- */
    --color-dark-bg:          #0F172A;
    --color-dark-surface:     #1E293B;
    --color-text:             #0F172A;
    --color-text-secondary:   #475569;
    --color-text-light:       #FFFFFF;
    --color-surface-light:    #F8FAFC;
    --color-border:           #E2E8F0;

    /* -------- Cores funcionais -------- */
    --color-whatsapp:         #25D366;
    --color-whatsapp-bg:      #188643; /* Escurecido p/ botão com texto branco: 4.64:1 (AA exige 4.5). Era #1A8F47 = 4.15:1, reprovava. Conferir com fd_impeccable.py antes de mexer. */
    --color-warning:          #F59E0B;
    --color-error:            #DC2626;

    /* -------- Tipografia -------- */
    --font-heading:           "Poppins", 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.5rem;   /* 56px */
    --fs-h2:                  2.5rem;   /* 40px */
    --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:             4rem;     /* 64px */

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

    /* -------- 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:              12px;
    --radius-xl:              16px;
    --radius-full:            9999px;

    /* -------- Sombras -------- */
    --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md:              0 4px 14px rgba(0, 0, 0, 0.08);
    --shadow-lg:              0 10px 25px rgba(30, 58, 138, 0.10);
    --shadow-xl:              0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-cta:             0 4px 14px rgba(59, 130, 246, 0.30);

    /* -------- 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:              2rem;     /* 32px */
        --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 */
    }
}