/* ============================================================
   DYNEXA — 01 TOKENS
   Direcao estetica: "dossie tecnico"
   Paleta extraida do logotipo (navy + dourado + grafite).
   ============================================================ */

:root {
  /* ---------- Cor: navy (institucional, dominante) ---------- */
  --navy-950: #04122E;
  --navy-900: #071C42;
  --navy-850: #08234F;
  --navy-800: #0A2A63;
  --navy-700: #0E3A85;   /* nucleo do logotipo */
  --navy-600: #1450AE;
  --navy-500: #1E63C4;
  --navy-400: #4A85D8;

  /* ---------- Cor: dourado (acento cirurgico) ---------- */
  --gold-800: #6E4705;
  --gold-700: #8A5A08;
  --gold-600: #B07000;   /* nucleo do logotipo */
  --gold-500: #C9971F;
  --gold-400: #DFB44E;
  --gold-300: #EBD08C;
  --gold-200: #F5E7C2;

  /* ---------- Cor: neutros ---------- */
  --ink:        #101722;
  --graphite:   #333A45;
  --slate:      #59616E;
  --mist:       #8B93A0;
  --line-soft:  #DCD8CF;
  --paper:      #FCFBF8;  /* off-white quente, nao branco esteril */
  --paper-2:    #F5F2EB;
  --paper-3:    #EDE9E0;
  --sand:       #F7F1E4;  /* painel destacado — Reforma Tributaria */
  --white:      #FFFFFF;

  /* ---------- Semanticos ---------- */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-2);
  --bg-dark:       var(--navy-950);
  --text:          var(--ink);
  --text-muted:    var(--slate);
  --text-invert:   #E9EDF4;
  --text-invert-muted: #9FB0CA;
  /* Acento sobre fundo CLARO: gold-700 (5.72:1 sobre --paper).
     O gold-600 do logotipo da 3.93:1 e reprova em texto pequeno.
     Em fundo escuro o acento e o gold-400 (9.53:1 sobre --navy-950). */
  --accent:        var(--gold-700);
  --accent-bright: var(--gold-500);
  --rule:          rgba(16, 23, 34, .13);
  --rule-strong:   rgba(16, 23, 34, .26);
  --rule-invert:   rgba(233, 237, 244, .16);
  --rule-gold:     rgba(176, 112, 0, .38);

  /* ---------- Tipografia ---------- */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* escala fluida */
  --fs-display: clamp(2.15rem, 1.05rem + 3.3vw, 3.75rem);
  --fs-h1:      clamp(2.1rem,  1.20rem + 3.2vw, 3.90rem);
  --fs-h2:      clamp(1.75rem, 1.15rem + 2.1vw, 2.90rem);
  --fs-h3:      clamp(1.30rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-h4:      clamp(1.10rem, 1.00rem + 0.4vw, 1.28rem);
  --fs-lead:    clamp(1.06rem, 0.98rem + 0.42vw, 1.32rem);
  --fs-body:    1.0rem;
  --fs-sm:      0.9125rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.6875rem;
  --fs-numeral: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.68;

  --ls-label: .22em;
  --ls-tight: -.022em;

  /* ---------- Espaco ---------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-9: 5rem;    --sp-10: 7rem;   --sp-11: 9.5rem;

  --section-y: clamp(4.5rem, 2.5rem + 7vw, 9.5rem);

  /* ---------- Layout ---------- */
  --container:      1280px;
  --container-text: 760px;
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3.25rem);
  --header-h: 84px;
  --header-h-compact: 66px;

  /* ---------- Forma ---------- */
  --radius: 2px;          /* institucional: quase reto */
  --radius-lg: 3px;
  --border: 1px solid var(--rule);

  --shadow-sm: 0 1px 2px rgba(4, 18, 46, .06),
               0 2px 8px rgba(4, 18, 46, .05);
  --shadow-md: 0 2px 4px rgba(4, 18, 46, .05),
               0 12px 28px -10px rgba(4, 18, 46, .16);
  --shadow-lg: 0 4px 8px rgba(4, 18, 46, .06),
               0 28px 60px -22px rgba(4, 18, 46, .28);

  /* ---------- Movimento ---------- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .18s;
  --dur-2: .34s;
  --dur-3: .62s;
  --dur-4: 1.05s;

  /* O header fica ACIMA do menu mobile. Abaixo, o overlay cobria o proprio
     botao de fechar e o logotipo — o usuario ficava preso no menu. */
  --z-menu:   110;
  --z-header: 120;
  --z-float:  90;
}

/* Densidade de leitura levemente maior em telas grandes */
@media (min-width: 1600px) {
  :root { --fs-body: 1.0625rem; --container: 1360px; }
}

/* No celular o header nao precisa da mesma altura: sem menu e sem botao,
   84px so roubam area util da primeira dobra. */
@media (max-width: 620px) {
  :root { --header-h: 64px; --header-h-compact: 56px; }
}