:root {
    /* --- Cores de marca (fixas, mesmas nos dois temas) --- */
    --spic-navy: #1D1C47;
    /* institucional escuro */
    --spic-blue: #052EFF;
    /* accent mais usado no código atual */
    --spic-lime: #B0FF03;
    /* "energia" — faixa de destaque em cards/CTAs */
    --spic-green: #78BB42;
    /* sustentabilidade / positivo */
    --spic-red: #D8232A;
    /* alerta / emergência */

    /* --- Tokens semânticos (tema claro) --- */
    --color-page: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F3F4F4;
    /* fundo de boxes de destaque */
    --color-surface-inverse: #1D1C47;
    /* seções escuras institucionais */
    --color-surface-emphasis: #052EFF;
    /* banners/CTA de emergência */
    --color-text: #252525;
    --color-text-muted: #6B6B78;
    --color-text-on-inverse: #F5F6FF;
    --color-text-on-emphasis: #FFFFFF;
    --color-border: #E4E4EA;
    --color-accent: #052EFF;
    --color-accent-strong: #031F99;
    /* hover do accent */
    --color-danger: #D8232A;

    /* --- Tipografia --- */
    --font-display: 'Venn', 'Big Shoulders', system-ui, sans-serif;
    /* títulos */
    --font-body: 'Nunito', 'Open Sans', system-ui, sans-serif;
    /* texto corrido */
    --font-label: 'Open Sans', system-ui, sans-serif;
    /* botões, badges, nav */

    --text-title: 1.875rem;
    /* 30px — MOBILE-FIRST: valor real do .uhss_banner__title em ≤767px */
    --text-h2: 1.75rem;
    /* 28px — título de seção (não varia por breakpoint no código real) */
    --text-h3: 1.5rem;
    /* 24px — subtítulo */
    --text-h4: 1.125rem;
    /* 18px — título de card */
    --text-body: 1rem;
    /* 16px */
    --text-label: 0.875rem;
    /* 14px — badge, legenda, uppercase */

    --leading-tight: 1.15;
    /* títulos e UI curta */
    --leading-base: 1.5;
    /* parágrafo padrão (substitui o 1.1 global atual, apertado demais) */
    --leading-loose: 2;
    /* só para blocos institucionais longos, como hoje */

    /* --- Espaçamento (substitui os valores soltos: 10,15,24,35,40,60,100,110px) --- */
    --space-1: 0.5rem;
    /* 8px  — gap interno pequeno */
    --space-2: 1rem;
    /* 16px — gap entre itens de lista/ícone+texto */
    --space-3: 1.5rem;
    /* 24px — margem entre título e texto */
    --space-4: 2rem;
    /* 32px — padding interno de card */
    --space-5: 2.5rem;
    /* 40px — padding de seção no mobile (já é o padrão real) */
    --space-6: 3.75rem;
    /* 60px — padding de card grande / CTA */
    --space-7: 6.25rem;
    /* 100px — padding de seção no desktop (já é o padrão real) */

    /* --- Token semântico responsivo: usar ESTE em vez de --space-5/--space-7 direto (ver seção 2) --- */
    --section-padding-y: var(--space-5);
    /* mobile-first: 40px */

    /* --- Raio de borda (substitui 5,14,15,20,24,25,30,35,40px) --- */
    --radius-sm: 0.5rem;
    /* 8px  — chip, input */
    --radius-md: 1rem;
    /* 16px — card, box de destaque */
    --radius-lg: 1.5rem;
    /* 24px — banner, card grande */
    --radius-pill: 999px;
    /* botão em pílula */
    --radius-circle: 50%;

    /* --- Sombra (tingida de navy, não preto puro) --- */
    --shadow-sm: 0 2px 8px rgba(29, 28, 71, .08);
    --shadow-md: 0 8px 24px rgba(29, 28, 71, .14);
    --shadow-lg: 0 20px 48px rgba(29, 28, 71, .22);

    /* --- Movimento --- */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;

    /* --- Faixa de destaque (substitui o border de 20px usado hoje em uhss.css/career.css) --- */
    --stripe-width: 6px;
}


@media (min-width: 1024px) {
    :root {
        --text-title: 2.1rem;
    }
}

@media (min-width: 767px) {
    :root {
        --text-title: 1.75rem;
    }
}


@media (min-width: 250px) {
    :root {
        --text-title: 1.3rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-page: #14132E;
        --color-surface: #1B1A3E;
        --color-surface-muted: #232257;
        --color-surface-inverse: #2B2A63;
        --color-title-blue: #052eff;
        --color-title-black: #252525;
        /* --color-title-white: #252525; */
        --color-text-black: #5b5858;
        --color-text-white: #252525;
        --color-text-grey: #252525;
        --color-text-muted: #ABABC4;
        --color-border: #36356B;
        --color-accent: #5C7CFF;
        --color-accent-strong: #8AA3FF;
    }
}

:root[data-theme="dark"] {
    --color-page: #14132E;
    --color-surface: #1B1A3E;
    --color-surface-muted: #232257;
    --color-surface-inverse: #2B2A63;
    --color-title-blue: #252525;
    --color-title-black: #252525;
    --color-title-white: #252525;
    --color-text-black: #252525;
    --color-text-white: #252525;
    --color-text-grey: #252525;
    --color-text-muted: #ABABC4;
    --color-border: #36356B;
    --color-accent: #5C7CFF;
    --color-accent-strong: #8AA3FF;
}