/* Yuu Digital 2027 — tokens do sistema de design.
   Gerado a partir do tokens.json do sistema "Yuu Digital". Não edite à mão:
   mude no sistema de design e regenere. */

:root,
[data-theme="light"] {
  --paper: #f3f3f1;
  --paper-raised: #ffffff;
  --slab: #0e0e0e;
  --slab-raised: #242424;
  --ink: #0e0e0e;
  --ink-muted: #5c5c58;
  --on-slab: #f3f3f1;
  --on-slab-muted: #a3a39d;
  --line: #e2e2dd;
  --line-slab: #2e2e2e;
  --lime: #c2f025;
  --on-lime: #0e0e0e;
  --violet: #5a22e6;
  --on-violet: #ffffff;
  --on-violet-muted: #e2dbff;
  --violet-ink: #5a22e6;
  --lavender: #e4def6;
  --focus: #5a22e6;
  --danger: #b42d14;

  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  --container-max: 1240px;
  --header-height: 72px;
}

[data-theme="dark"] {
  --paper: #0b0b0b;
  --paper-raised: #171717;
  --slab: #1b1b1b;
  --slab-raised: #2a2a2a;
  --ink: #f3f3f1;
  --ink-muted: #a3a39d;
  --line: #2a2a2a;
  --line-slab: #333333;
  --violet-ink: #a98bff;
  --lavender: #2a1f52;
  --focus: #c2f025;
  --danger: #ff8a6b;
}

/* ---------- Estilos de texto ---------- */
.display-xl { font: 800 112px/0.92 var(--font-display); letter-spacing: -0.04em; }
.display-l  { font: 800 80px/0.95 var(--font-display); letter-spacing: -0.035em; }
.poster     { font: 800 64px/0.98 var(--font-display); letter-spacing: -0.01em; }
.heading-1  { font: 700 48px/1.0 var(--font-display); letter-spacing: -0.025em; }
.heading-2  { font: 700 32px/1.08 var(--font-display); letter-spacing: -0.02em; }
.heading-3  { font: 700 24px/1.15 var(--font-display); letter-spacing: -0.01em; }
.stat       { font: 800 72px/1.0 var(--font-display); letter-spacing: -0.04em; }
.lead        { font: 400 20px/30px var(--font-body); }
.body        { font: 400 16px/26px var(--font-body); }
.body-strong { font: 600 16px/26px var(--font-body); }
.body-sm     { font: 400 14px/22px var(--font-body); }
.label       { font: 500 15px/20px var(--font-body); }
.caption     { font: 500 13px/16px var(--font-body); }
.eyebrow     { font: 500 12px/16px var(--font-mono); letter-spacing: 0.12em; }
.code        { font: 400 14px/22px var(--font-mono); }