/* ============================================================
   RADAR BRASIL — DESIGN TOKENS
   Fonte única de verdade para cores, tipografia, sombras,
   raios de borda e transições.
   Carregado antes de base.css e components.css.
   ============================================================ */

:root {

    /* ── Paleta de escala de tons — navy/blue (identidade Radar Brasil) ── */
    --hdr-900: #070e2a;
    --hdr-800: #0d1640;
    --hdr-700: #101d4f;
    --hdr-500: #264584;
    --hdr-300: #3b6cbf;
    --hdr-200: #5a82d0;
    --hdr-100: #8aaad4;
    --hdr-50:  #dbeafe;

    /* ── Aliases semânticos — cores ── */
    --color-header-bg:         #101d4f;   /* cabeçalho principal e rodapé */
    --color-primary:           #264584;   /* azul de referência da marca */
    --color-primary-dark:      #1a3468;   /* hover escuro sobre primary */
    --color-primary-deep:      #101d4f;   /* títulos e headings */
    --color-primary-light:     #3b6cbf;   /* hover suave */
    --color-primary-mid:       #264584;   /* acento, barras internas */
    --color-primary-grad-start:#264584;   /* mantido por compatibilidade */
    --color-teal:              #264584;   /* substituído pelo azul de marca */

    /* ── Texto ── */
    --color-text-primary:   #101d4f;
    --color-text-secondary: #264584;
    --color-text-muted:     #5577aa;
    --color-text-faint:     #334488;
    --color-text-dark:      #070e2a;

    /* ── Backgrounds ── */
    --color-bg-page:   #d9e8f5;   /* azul claro da identidade visual */
    --color-bg-card:   #ffffff;
    --color-bg-input:  #f5f8fa;
    --color-bg-subtle: #eef2f6;

    /* ── Bordas ── */
    --color-border:        #e4ecf0;
    --color-border-input:  #c8d8ec;
    --color-border-subtle: #c0d4e8;

    /* ── Cores de painel (sem degradê) ── */
    --gradient-panel-header: #264584;
    --gradient-btn-primary:  #264584;
    --gradient-landing:      #264584;

    /* ── Tipografia ── */
    --font-sans:    'Roboto', system-ui, sans-serif;
    --font-display: 'Sora', 'Roboto', sans-serif;
    --font-ui:      'DM Sans', 'Roboto', sans-serif;

    /* Escala de tamanhos */
    --text-xs:   0.625rem;    /* 10px  — rótulos pequenos, badges  */
    --text-sm:   0.6875rem;   /* 11px  — botões, labels de filtro  */
    --text-base: 0.875rem;    /* 14px  — corpo de texto padrão     */
    --text-lg:   1rem;        /* 16px  — texto destacado           */
    --text-xl:   1.25rem;     /* 20px  — títulos de card           */
    --text-2xl:  1.375rem;    /* 22px  — títulos de seção          */
    --text-3xl:  1.625rem;    /* 26px  — títulos de página         */

    /* ── Border radius ── */
    --radius-sm:   4px;      /* inputs internos, badges    */
    --radius-md:   6px;      /* botões de ação, inputs     */
    --radius-lg:   10px;     /* botões CTA, selects        */
    --radius-xl:   14px;     /* cards compactos            */
    --radius-2xl:  16px;     /* cards secundários          */
    --radius-3xl:  20px;     /* cards principais           */
    --radius-full: 9999px;   /* pílulas, toggles           */

    /* ── Sombras ── */
    --shadow-sm:    0 2px 8px  rgba(38,69,132,.08);
    --shadow-md:    0 2px 16px rgba(38,69,132,.10);
    --shadow-lg:    0 4px 28px rgba(38,69,132,.12);
    --shadow-card:  0 6px 32px rgba(16,29,79,.11), 0 1px 4px rgba(16,29,79,.06);
    --shadow-glass: 0 8px 40px rgba(16,29,79,.12), 0 1px 4px rgba(16,29,79,.06);

    /* ── Transições ── */
    --transition-fast: .15s;
    --transition-base: .20s;
    --transition-slow: .30s;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.22, 1, 0.36, 1);
}