/**
 * Design Tokens — Portal Registro de Marca
 * Fonte: Guia de Identidade Visual (Setembro 2026)
 * Não alterar valores sem validar contra o guia de marca.
 */

:root {
    /* Cores — primária, secundária, neutras */
    --color-navy: #0E2A47;
    --color-navy-dark: #081826;
    --color-green-brand: #2E8B47;
    --color-green-cta: #1F6F3D;
    --color-green-cta-hover: #17552F;

    --color-white: #FFFFFF;
    --color-off-white: #F4F5F6;
    --color-gray-light: #E4E7EA;
    --color-gray-mid: #7C868D;
    --color-gray-dark: #3C4247;
    --color-black: #14171A;

    --color-warning: #D98C22;
    --color-error: #C0392B;

    /* Papéis semânticos */
    --color-bg: var(--color-white);
    --color-bg-alt: var(--color-off-white);
    --color-heading: var(--color-navy);
    --color-text: var(--color-gray-dark);
    --color-border: var(--color-gray-light);
    --color-cta-bg: var(--color-green-cta);
    --color-cta-bg-hover: var(--color-green-cta-hover);
    --color-success: var(--color-green-brand);

    /* Tipografia — Archivo (Google Fonts) */
    --font-family-base: 'Archivo', sans-serif;

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

    /* Escala tipográfica — desktop */
    --fs-h1: 96px;
    --lh-h1: 1.05;
    --fs-h2: 64px;
    --lh-h2: 1.1;
    --fs-h3: 44px;
    --lh-h3: 1.2;
    --fs-h4: 32px;
    --lh-h4: 1.25;
    --fs-h5: 24px;
    --lh-h5: 1.3;
    --fs-body: 18px;
    --lh-body: 1.6;
    --fs-body-sm: 15px;
    --lh-body-sm: 1.6;
    --fs-caption: 13px;
    --fs-button: 16px;
    --fs-label: 13px;

    /* Grid e layout */
    --container-max: 1440px;
    --grid-margin: 96px;
    --grid-gutter: 24px;
    --grid-columns: 12;

    /* Espaçamento */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Superfícies */
    --radius: 0px;
    --border-width: 2px;
    --shadow-elevated: 0 24px 48px rgba(14, 42, 71, .18);
}

/* Breakpoints de referência (usar em media queries, CSS não suporta var() em @media) */
/* mobile: até 430px | tablet: 768–1024px | desktop: 1440px+ */

@media (max-width: 767px) {
    :root {
        --grid-margin: 24px;

        --fs-h1: 56px;
        --lh-h1: 1.1;
        --fs-h2: 40px;
        --lh-h2: 1.15;
        --fs-h3: 30px;
        --lh-h3: 1.25;
        --fs-h4: 24px;
        --lh-h4: 1.3;
        --fs-h5: 20px;
        --lh-h5: 1.35;
        --fs-body: 16px;
        --fs-body-sm: 14px;
        --lh-body-sm: 1.55;
        --fs-caption: 12px;
        --fs-button: 15px;
        --fs-label: 12px;
    }
}