/* ==========================================================================
   NIVOR — DESIGN SYSTEM · TOKENS
   Fonte única de verdade para cor, tipografia, espaço, forma e movimento.
   Nenhum valor cru deve ser escrito fora deste arquivo.
   ========================================================================== */

:root{

  /* --- COR · superfícies escuras ------------------------------------------
     Escala de profundidade. Quanto maior o número, mais próxima do leitor. */
  --bg:            #060B16;
  --surface-1:     #0A1120;
  --surface-2:     #0E1728;
  --surface-3:     #131E33;
  --surface-glass: rgba(255,255,255,.035);

  /* --- COR · superfícies claras ------------------------------------------- */
  --paper:         #F1F3F7;
  --paper-raised:  #FFFFFF;
  --paper-sunken:  #E7EAF0;

  /* --- COR · tinta --------------------------------------------------------
     ink-2 e paper-ink-2 são os limites mínimos de contraste para corpo. */
  --ink:           #EEF3FA;
  --ink-2:         #A8B4C6;   /* 8.9:1 sobre --bg   */
  --ink-3:         #74808F;   /* rótulos, nunca corpo */
  --paper-ink:     #0B1220;
  --paper-ink-2:   #4A5568;   /* 7.4:1 sobre --paper */
  --paper-ink-3:   #6B7686;

  /* --- COR · acento -------------------------------------------------------
     Creme é o único acento. Usado como energia, nunca como decoração. */
  --cream:         #FFFBC8;
  --cream-deep:    #F4EBA4;
  --cream-glow:    rgba(255,251,200,.30);
  --cream-veil:    rgba(255,251,200,.07);

  /* --- COR · linhas -------------------------------------------------------
     Hairlines são o material estrutural do layout. */
  --line:          rgba(148,170,205,.13);
  --line-strong:   rgba(160,185,220,.26);
  --line-cream:    rgba(255,251,200,.24);
  --paper-line:    #DCE1E9;
  --paper-line-2:  #C6CDD8;

  /* --- COR · sinal (uso raro, informativo) -------------------------------- */
  --signal-up:     #34D399;
  --signal-warn:   #E9B949;

  /* --- TIPOGRAFIA ---------------------------------------------------------
     display : títulos e números — caráter
     body    : leitura — neutralidade
     mono    : rótulos técnicos, índices, telemetria — precisão            */
  --f-display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Escala fluida. Cada passo tem tracking e altura de linha próprios —
     título grande com tracking de corpo é o erro nº1 de tipografia. */
  --t-display:  clamp(2.65rem, 6.1vw, 4.85rem);
  --t-h2:       clamp(1.95rem, 4.2vw, 3.15rem);
  --t-h3:       clamp(1.25rem, 1.9vw, 1.5rem);
  --t-h4:       1.0625rem;
  --t-lead:     clamp(1.0625rem, 1.5vw, 1.1875rem);
  --t-body:     1.0625rem;   /* 17px — nunca abaixo de 16px no mobile */
  --t-small:    .9375rem;
  --t-label:    .6875rem;

  --lh-display: .98;
  --lh-title:   1.08;
  --lh-body:    1.65;

  --tr-display: -.038em;
  --tr-title:   -.025em;
  --tr-label:   .22em;

  /* --- ESPAÇO · escala de 4 -----------------------------------------------
     Só estes valores. Espaçamento fora da escala quebra o ritmo vertical. */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* Respiro de seção — generoso, conforme §22 do briefing. */
  --sec-y:      clamp(76px, 9.5vw, 148px);
  --sec-y-tight:clamp(56px, 6.5vw, 96px);

  /* --- LAYOUT ------------------------------------------------------------- */
  --maxw:       1240px;
  --maxw-text:  68ch;      /* limite de legibilidade: 65–75 caracteres */
  --gutter:     clamp(20px, 4vw, 40px);
  --nav-h:      74px;

  /* --- FORMA -------------------------------------------------------------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r:     16px;
  --r-lg:  22px;
  --r-pill:999px;

  /* --- ELEVAÇÃO ----------------------------------------------------------
     Sombras extremamente suaves (§22). Profundidade vem de linha e de cor,
     não de sombra pesada. */
  --shadow-1: 0 1px 2px rgba(3,7,18,.28);
  --shadow-2: 0 18px 44px -28px rgba(3,7,18,.85);
  --shadow-3: 0 34px 80px -44px rgba(3,7,18,.95);
  --shadow-paper: 0 1px 2px rgba(11,18,32,.05), 0 12px 32px -22px rgba(11,18,32,.22);

  /* --- MOVIMENTO ----------------------------------------------------------
     ease-out para entrada. Micro-interações em 180–260ms; revelações em
     600–720ms. Nada acima disso — passa a sensação de lentidão. */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.32,.72,.32,1);
  --d-micro:   200ms;
  --d-hover:   260ms;
  --d-reveal:  680ms;

  /* --- CAMADAS · escala fechada ------------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     40;
  --z-overlay: 60;
}