/* ============================================================
   HAIKAI — Design Tokens
   Adaptado do design system newnew (ver newnew-tokens.css /
   newnew-tokens.json) para a identidade da Haikai.
   Fonte de cor: assets/01_haikai_REGULAR_Black.png (amostragem
   de pixel) — azul #1ca7ff, preto #000000.
   Tipografia: com a fusão newnew + Haikai em andamento, a Haikai passa a
   usar o próprio par tipográfico da newnew — Polymath (display) e Europa
   Grotesk Nr 2 SB (texto), carregadas via @font-face em style.css.
   ============================================================ */

:root {
  /* ---------- CORES: núcleo institucional ---------- */
  --haikai-blue:        #1ca7ff;  /* azul de marca — símbolo, CTA, destaques */
  --haikai-blue-ink:     #0a6fb8;  /* azul escurecido — uso em texto/link, AA compatível */
  --haikai-blue-soft:    #e8f4ff;  /* tint claro — fundos suaves, hover discreto */
  --haikai-black:        #101114;  /* preto de marca — não usar #000 em área grande */
  --haikai-black-soft:   #17181c;  /* variação de profundidade sobre preto */
  --haikai-offwhite:     #f5f7fa;  /* fundo padrão de todas as seções */
  --white:               #ffffff;

  /* ---------- CORES: neutros ---------- */
  --gray-900:  #1a1b1e;  /* texto de alta hierarquia sobre off-white */
  --gray-600:  #565b66;  /* texto de apoio — AA a 16px */
  --gray-400:  #8a909b;  /* texto terciário — só corpo grande/bold */
  --gray-200:  #dde1e8;  /* fundo de bloco neutro, chip, placeholder */
  --hairline:  #e4e8ef;  /* bordas de card e divisores de 1px */

  /* ---------- TIPOGRAFIA: famílias ---------- */
  --font-display: 'Polymath', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Europa Grotesk Nr 2 Sb', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TIPOGRAFIA: escala (desktop) ---------- */
  --fs-display-xl: clamp(2.75rem, 3.2rem + 2.2vw, 6.25rem);   /* hero */
  --fs-display-l:  clamp(2.25rem, 2.4rem + 1.6vw, 4rem);      /* título de seção grande */
  --fs-h1:         clamp(2rem, 1.8rem + 1vw, 3rem);
  --fs-h2:         clamp(1.6rem, 1.4rem + 0.8vw, 2.25rem);
  --fs-h3:         1.5rem;
  --fs-lead:       1.25rem;
  --fs-body-l:     1.125rem;
  --fs-body:       1rem;
  --fs-label:      0.875rem;
  --fs-caption:    0.8125rem;
  --fs-micro:      0.75rem;

  /* ---------- TIPOGRAFIA: pesos ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---------- TIPOGRAFIA: tracking ----------
     Verificado ao vivo em newnew.group (computed letter-spacing em h1, retranca
     e links de nav): "normal" em toda a tipografia, mesmo nos títulos display
     grandes. O newnew-tokens.json trazia valores negativos (-5px/-7px) que não
     batem com o DOM real — a Haikai segue o que foi medido, não o documento. */
  --ls-display: normal;
  --ls-heading: normal;
  --ls-normal:  normal;
  --ls-label:   normal;

  /* ---------- RAIOS ---------- */
  --radius-pill: 328px;
  --radius-xl:   40px;
  --radius-l:    30px;
  --radius-m:    20px;
  --radius-s:    12px;
  --radius-card: 9px;
  --radius-xxs:  4px;

  /* ---------- ESPAÇAMENTO ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  20px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  56px;
  --space-9:  72px;
  --space-10: 96px;
  --space-11: 140px;
  --space-12: 200px;

  /* ---------- ELEVAÇÃO ---------- */
  --shadow-soft:  0 8px 50px rgba(16, 17, 20, .06);
  --shadow-card:  0 2px 14px rgba(16, 17, 20, .05);
  --shadow-focus: 0 0 0 3px rgba(28, 167, 255, .35);

  /* ---------- MOVIMENTO ----------
     Durações alinhadas ao sistema newnew: .1 troca de cor, .2 transform/hover,
     .3 transição genérica, .5 entrada por scroll (assinatura "IX2"). */
  --motion-fast: .1s;
  --motion-base: .2s;
  --motion-slow: .3s;
  --motion-reveal: .5s;
  --easing-default: cubic-bezier(.4,0,.2,1);

  /* ---------- LAYOUT ---------- */
  --container-max: 1180px;
  --container-narrow: 760px;
  --gutter: 24px;

  /* ---------- BREAKPOINTS (referência — usados em media queries) ---------- */
  --bp-xl: 1440px;
  --bp-lg: 1080px;
  --bp-md: 860px;
  --bp-sm: 560px;
}