/* ============================================================================
   ATRICON · DESIGN SYSTEM — DESIGN TOKENS
   Associação dos Membros dos Tribunais de Contas do Brasil
   ----------------------------------------------------------------------------
   Fonte única da verdade para cor, tipografia, espaçamento, forma e movimento.
   Camada 1: tokens primitivos (valores brutos)
   Camada 2: tokens semânticos (intenção de uso) — use SEMPRE estes nos componentes
   ============================================================================ */

:root {
  /* ------------------------------------------------------------------ */
  /* 1. CORES PRIMITIVAS — extraídas da marca ATRICON                   */
  /* ------------------------------------------------------------------ */

  /* Azul institucional (profundo) — cor primária da marca */
  --atc-blue-900: #0C2640;
  --atc-blue-800: #103254;
  --atc-blue-700: #153D68;   /* ★ Azul Atricon (base) */
  --atc-blue-600: #1C4E82;
  --atc-blue-500: #24609C;
  --atc-blue-400: #4A7DB0;
  --atc-blue-300: #7BA0C7;
  --atc-blue-200: #B4C8DE;
  --atc-blue-100: #DCE6F1;
  --atc-blue-50:  #EEF3F9;

  /* Azul ciano (ação / interatividade) */
  --atc-cyan-900: #0B5A86;
  --atc-cyan-700: #1684BC;
  --atc-cyan-600: #1E96D1;
  --atc-cyan-500: #30A9E0;   /* ★ Azul Ciano (base) */
  --atc-cyan-400: #5BBDE8;
  --atc-cyan-300: #8AD2EF;
  --atc-cyan-200: #BEE6F6;
  --atc-cyan-100: #E2F4FB;

  /* Turquesa (apoio) */
  --atc-teal-800: #2C7E78;
  --atc-teal-600: #3E9F98;
  --atc-teal-500: #5CBDB6;   /* ★ Turquesa (base) */
  --atc-teal-300: #98D7D2;
  --atc-teal-100: #DDF1EF;

  /* Dourado (destaque / energia) */
  --atc-gold-700: #C9A800;
  --atc-gold-600: #E6C200;
  --atc-gold-500: #FED900;   /* ★ Dourado (base) */
  --atc-gold-300: #FFE759;
  --atc-gold-100: #FFF6C2;

  /* Neutros (texto / superfícies) — base no cinza do wordmark #60696D */
  --atc-gray-900: #1A1E21;
  --atc-gray-800: #2B3035;
  --atc-gray-700: #3D454A;
  --atc-gray-600: #60696D;   /* ★ Cinza institucional (wordmark) */
  --atc-gray-500: #828B90;
  --atc-gray-400: #A7AFB3;
  --atc-gray-300: #CBD1D4;
  --atc-gray-200: #E4E8EA;
  --atc-gray-100: #F1F3F4;
  --atc-gray-50:  #F8FAFB;
  --atc-white:    #FFFFFF;
  --atc-black:    #0A0C0D;

  /* Funcionais (feedback / status) */
  --atc-success: #16794B;          /* AA em branco (5.4:1) */
  --atc-success-bg: #E4F4EC;
  --atc-warning: #C98A00;          /* uso decorativo/ícone */
  --atc-warning-text: #946400;     /* uso em texto — AA (5.1:1) */
  --atc-warning-bg: #FCF1D6;
  --atc-danger:  #C0392B;
  --atc-danger-bg: #FBE6E3;
  --atc-info:    #1E96D1;
  --atc-info-bg: #E2F4FB;

  /* Gradientes da marca (derivados do emblema) */
  --atc-gradient-brand: linear-gradient(135deg, #153D68 0%, #30A9E0 60%, #5CBDB6 100%);
  --atc-gradient-emblem: conic-gradient(from 200deg, #FED900, #5CBDB6, #30A9E0, #153D68, #FED900);
  --atc-gradient-blue: linear-gradient(135deg, #153D68 0%, #1C4E82 100%);
  --atc-gradient-cyan: linear-gradient(135deg, #1684BC 0%, #30A9E0 100%);
  --atc-gradient-gold: linear-gradient(135deg, #E6C200 0%, #FED900 100%);

  /* ------------------------------------------------------------------ */
  /* 2. CORES SEMÂNTICAS — use estas nos componentes                    */
  /* ------------------------------------------------------------------ */
  --color-primary:        var(--atc-blue-700);
  --color-primary-hover:  var(--atc-blue-800);
  --color-primary-active: var(--atc-blue-900);
  --color-primary-soft:   var(--atc-blue-50);

  --color-action:         var(--atc-cyan-500);
  --color-action-hover:   var(--atc-cyan-600);
  --color-action-soft:    var(--atc-cyan-100);

  --color-accent:         var(--atc-gold-500);
  --color-accent-strong:  var(--atc-gold-600);

  --color-support:        var(--atc-teal-500);

  --color-text:           var(--atc-gray-800);
  --color-text-muted:     var(--atc-gray-600);
  --color-text-subtle:    var(--atc-gray-500);
  --color-text-onbrand:   var(--atc-white);
  --color-text-link:      var(--atc-cyan-900);   /* #0B5A86 — AA em branco para texto normal */
  --color-on-action:      var(--atc-blue-900);   /* texto navy sobre fundo ciano/dourado (AA) */

  --color-bg:             var(--atc-white);
  --color-bg-subtle:      var(--atc-gray-50);
  --color-bg-muted:       var(--atc-gray-100);
  --color-bg-inverse:     var(--atc-blue-900);

  --color-border:         var(--atc-gray-200);
  --color-border-strong:  var(--atc-gray-300);
  --color-focus-ring:     var(--atc-cyan-500);

  /* ------------------------------------------------------------------ */
  /* 3. TIPOGRAFIA                                                       */
  /* ------------------------------------------------------------------ */
  /* Display/Títulos: Montserrat (geométrica, institucional) — par do wordmark.
     Texto: Inter / Source Sans (legibilidade em telas e acessibilidade). */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Escala tipográfica — razão 1.25 (Major Third) */
  --fs-3xs: 0.694rem;  /* 11px */
  --fs-2xs: 0.781rem;  /* 12.5px */
  --fs-xs:  0.833rem;  /* 13px */
  --fs-sm:  0.889rem;  /* 14px */
  --fs-md:  1rem;      /* 16px — base */
  --fs-lg:  1.125rem;  /* 18px */
  --fs-xl:  1.333rem;  /* 21px */
  --fs-2xl: 1.602rem;  /* 26px */
  --fs-3xl: 2.027rem;  /* 32px */
  --fs-4xl: 2.566rem;  /* 41px */
  --fs-5xl: 3.247rem;  /* 52px */
  --fs-6xl: 4.0rem;    /* 64px */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.08em;

  /* ------------------------------------------------------------------ */
  /* 4. ESPAÇAMENTO — base 4px (escala 4-pt)                            */
  /* ------------------------------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* ------------------------------------------------------------------ */
  /* 5. FORMA — raios, bordas, sombras                                  */
  /* ------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-thin:  1px;
  --border-thick: 2px;

  --shadow-xs: 0 1px 2px rgba(21, 61, 104, 0.06);
  --shadow-sm: 0 2px 6px rgba(21, 61, 104, 0.08);
  --shadow-md: 0 6px 18px rgba(21, 61, 104, 0.10);
  --shadow-lg: 0 14px 38px rgba(21, 61, 104, 0.14);
  --shadow-xl: 0 24px 60px rgba(21, 61, 104, 0.18);
  --shadow-focus: 0 0 0 3px rgba(48, 169, 224, 0.45);

  /* ------------------------------------------------------------------ */
  /* 6. LAYOUT — container, grid, breakpoints                           */
  /* ------------------------------------------------------------------ */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1320px;
  --grid-columns: 12;
  --grid-gutter:  24px;

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ------------------------------------------------------------------ */
  /* 7. MOVIMENTO                                                        */
  /* ------------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ------------------------------------------------------------------ */
  /* 8. ELEVAÇÃO Z                                                       */
  /* ------------------------------------------------------------------ */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
}

/* ============================================================================
   SUB-TEMAS POR SUBSITE — sobrescrevem apenas a marca de ação/destaque.
   Aplicar adicionando o atributo data-subsite no <body> ou <html>.
   ============================================================================ */
[data-subsite="institucional"] { --brand: var(--atc-blue-700); --brand-2: var(--atc-cyan-500); }
[data-subsite="radar"]         { --brand: #0E7C5A; --brand-2: #14A06F; --color-action:#0E7C5A; --color-action-hover:#0B6249; }
[data-subsite="pntp"]          { --brand: #0E7C5A; --brand-2: #14A06F; --color-action:#0E7C5A; --color-action-hover:#0B6249; }
[data-subsite="qatc"]          { --brand: #8A6D1F; --brand-2: #C9A227; --color-action:#C9A227; --color-action-hover:#A5851C; --color-accent: var(--atc-gold-500); }
[data-subsite="infocontas"]    { --brand: #153D68; --brand-2: #30A9E0; --color-action: var(--atc-cyan-600); }
[data-subsite="ods"]           { --brand: #2C7E78; --brand-2: #5CBDB6; --color-action:#2C7E78; --color-action-hover:#236460; }
[data-subsite="catc"]          { --brand: #1C4E82; --brand-2: #30A9E0; --color-action: var(--atc-cyan-500); }
[data-subsite="projetos"]      { --brand: #103254; --brand-2: #4A7DB0; --color-action: var(--atc-blue-600); }
[data-subsite="mmd"]           { --brand: #37474F; --brand-2: #607D8B; --color-action:#37474F; --color-action-hover:#263238; }
[data-subsite="beneficios"]    { --brand: #8E2519; --brand-2: #B5432E; --color-action:#8E2519; --color-action-hover:#6E1C13; }
[data-subsite="redeintegrar"]  { --brand: #B0338C; --brand-2: #D45BA8; --color-action:#B0338C; --color-action-hover:#822667; }
[data-subsite="infanciasegura"]{ --brand: #C0563B; --brand-2: #E08763; --color-action:#C0563B; --color-action-hover:#9C4530; }
[data-subsite="boaspraticas"]  { --brand: #2C7E78; --brand-2: #5CBDB6; --color-action:#2C7E78; --color-action-hover:#236460; }
[data-subsite="redesti"]       { --brand: #3D454A; --brand-2: #60696D; --color-action: var(--atc-blue-700); }
:root { --brand: var(--atc-blue-700); --brand-2: var(--atc-cyan-500); }