/* ── HypQuant Design Tokens — OLO Calibrated v2 ──────────────────
   Paleta: Cinza Laboratório (hue 168) + Acento Teal-Menta
   Auditoria: contraste WCAG verificado, colisões eliminadas,
   separação semântica corrigida (positive/neutral/negative).
   ──────────────────────────────────────────────────────────────── */

:root {
  /* ── Backgrounds — Cinza Laboratório (hue 168, visível no monitor) ─
     Hierarquia de 4 camadas com +4-5pt de L em cada degrau.
     A infusão de hue 168 cria o tom fosco esmeralda proprietário.   */
  --bg-base:          oklch(24% 0.012 168);
  --bg-surface:       oklch(28% 0.014 168);
  --bg-raised:        oklch(33% 0.016 168);
  --bg-overlay:       oklch(38% 0.018 168);
  --bg-surface-glass: oklch(28% 0.014 168 / 0.88);

  /* ── Borders — calibradas para ficarem acima de cada camada ──────
     border-subtle fica 6pt acima de bg-raised (33% -> 34%+).
     border-faint deriva de border-subtle só reduzindo o chroma
     (mesma luminosidade ~35%, croma 0.015 -> 0.005): a borda
     continua estrutural — visível na grade — mas perde o "peso"
     cromático da marca. Usado em estados inativos/roadmap que
     precisam permanecer estruturais sem competir com o glow do
     estado ativo (resolve para oklch(35% 0.005 168)).
     OBS: `l` em sintaxe de cor relativa é <number> (faixa 0-1), não
     <percentage> — `calc(l + 1%)` mistura tipos e invalida a cor
     inteira (CSS.supports retorna false, var() vira inválida em
     todo lugar onde é usada). Use `calc(l + 0.01)`.               */
  --border-subtle:   oklch(34% 0.015 168);
  --border-default:  oklch(42% 0.018 168);
  --border-strong:   oklch(52% 0.022 168);
  --border-faint:    oklch(from var(--border-subtle) calc(l + 0.01) calc(c - 0.010) h);

  /* ── Text — WCAG AA verificado contra bg-base (24%) ─────────────
     text-muted  70%: 5.03:1 (AA safe para 11px+)
     text-secondary 79%: 6.59:1 (AA)
     text-primary 91%: 9.17:1 (AAA)
     text-heading 98%: 11.89:1 (AAA)                                 */
  --text-muted:      oklch(70% 0.008 168);
  --text-secondary:  oklch(79% 0.005 168);
  --text-primary:    oklch(91% 0.003 168);
  --text-heading:    oklch(98% 0.002 168);

  /* ── Accent — OLO Teal Menta (hue 168, mesmo DNA do fundo) ──────
     accent-subtle em 35% para separar claramente de bg-raised(33%) */
  --accent:         oklch(81% 0.135 168);
  --accent-hover:   oklch(86% 0.115 168);
  --accent-dim:     oklch(69% 0.105 168);
  --accent-active:  oklch(52% 0.085 168);
  --accent-subtle:  oklch(38% 0.048 168);
  --accent-ghost:   oklch(81% 0.135 168 / 0.06);
  --accent-glow:    oklch(81% 0.135 168 / 0.14);

  /* ── Data Semântica — 3 hues distintos, separados do accent(168) ─
     positive  hue 140: verde grama — 28° de separação do accent
     negative  hue  22: coral fosco — 146° de separação do accent
     neutral   hue  75: âmbar      —  93° de separação do accent
     highlight hue  85: champanhe  — destaque suave para parciais    */
  --data-positive:        oklch(76% 0.120 140);
  --data-positive-bg:     oklch(28% 0.032 140);
  --data-positive-border: oklch(38% 0.055 140);
  --data-positive-glow:   oklch(76% 0.120 140 / 0.14);

  --data-negative:        oklch(70% 0.130 22);
  --data-negative-bg:     oklch(27% 0.032 22);
  --data-negative-border: oklch(37% 0.055 22);
  --data-negative-glow:   oklch(70% 0.130 22 / 0.14);

  --data-neutral:         oklch(76% 0.090 75);
  --data-neutral-bg:      oklch(28% 0.028 75);
  --data-neutral-border:  oklch(38% 0.050 75);

  --data-highlight:       oklch(88% 0.070 85);

  /* ── Typography ──────────────────────────────────────────────────
     display : Space Grotesk Bold — títulos e métricas, DNA da marca
     ui      : Plus Jakarta Sans  — UI densa, tabelas, menus, inputs
     mono    : JetBrains Mono     — tudo que envolva números e dados */
  --font-display: "Space Grotesk", sans-serif;
  --font-ui:      "Plus Jakarta Sans", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  /* ── Type scale (base 4px) ───────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;
  --text-3xl:  48px;
  --text-4xl:  72px;

  /* ── Spacing (grid 8px) ─────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Light mode — Docs/Institutional Site Only ──────────────── */
  --light-bg-base:        #fafcfb;
  --light-bg-surface:     #f1f5f3;
  --light-bg-raised:      #e5ebe8;
  --light-bg-overlay:     #d9e0dd;
  --light-border:         #aebab5;
  --light-text-heading:   #111a16;
  --light-text-primary:   #22302a;
  --light-text-secondary: #445c53;
  --light-text-muted:     #69857a;
  --light-text-nav:       #31423c;
  --light-accent:         #195c45;
}