/* AnaGoat — generated from tokens.json */

:root, [data-theme="sakura"] {
  --surface: #fbf3ea;
  --surface-raised: #fffaf5;
  --surface-sunken: #f1e2cf;
  --ink: #2b1720;
  --ink-muted: #6b5260;
  --border: #e2cdbb;
  --fucsia: #c0177a;
  --on-fucsia: #ffffff;
  --sakura: #f9cfe0;
  --violeta: #6a2c9e;
  --on-violeta: #ffffff;
  --menta: #4fd1c0;
  --menta-ink: #0b6e65;
  --cafe: #7b4329;
  --oro: #f2b632;
  --on-acento: #2b1720;
  --danger: #b42318;
  --on-danger: #ffffff;
  --focus-ring: #6a2c9e;
  --shadow-sticker: 4px 4px 0 #7b4329;
}

[data-theme="noche"] {
  --surface: #1c1220;
  --surface-raised: #2a1b30;
  --surface-sunken: #140c17;
  --ink: #f8ece4;
  --ink-muted: #c4adba;
  --border: #45304d;
  --fucsia: #ff5fb0;
  --on-fucsia: #2b0a1c;
  --sakura: #5a1f43;
  --violeta: #b98ae6;
  --on-violeta: #1c0f2a;
  --menta: #4fd1c0;
  --menta-ink: #6fe3d3;
  --cafe: #c98a64;
  --oro: #f2b632;
  --on-acento: #2b1720;
  --danger: #ff8f7d;
  --on-danger: #2b0a0a;
  --focus-ring: #c9a3f0;
  --shadow-sticker: 4px 4px 0 #000000;
}

[data-theme="pro"] {
  --surface: #0c090e;
  --surface-raised: #16111a;
  --surface-sunken: #070509;
  --ink: #f3ede8;
  --ink-muted: #a0959f;
  --border: #29212e;
  --fucsia: #ff5fb0;
  --on-fucsia: #2b0a1c;
  --sakura: #3d1830;
  --violeta: #b98ae6;
  --on-violeta: #1c0f2a;
  --menta: #4fd1c0;
  --menta-ink: #6fe3d3;
  --cafe: #a87253;
  --oro: #f2b632;
  --on-acento: #2b1720;
  --danger: #ff8f7d;
  --on-danger: #2b0a0a;
  --focus-ring: #c9a3f0;
  --shadow-sticker: none;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --font-display: "Jua", "Zen Maru Gothic", system-ui, sans-serif;
  --font-body: "Zen Maru Gothic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-pro: "Instrument Sans", system-ui, sans-serif;
}

.display { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 400; }
.title { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 400; }
.heading { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 26px; font-weight: 500; }
.body-sm { font-family: var(--font-body); font-size: 14px; line-height: 22px; font-weight: 500; }
.body-strong { font-family: var(--font-body); font-size: 16px; line-height: 26px; font-weight: 700; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.stat { font-family: var(--font-mono); font-size: 22px; line-height: 28px; font-weight: 700; }
.pro-hero { font-family: var(--font-pro); font-size: 112px; line-height: 0.95; font-weight: 500; letter-spacing: -0.035em; }
.pro-title { font-family: var(--font-pro); font-size: 48px; line-height: 1.05; font-weight: 500; letter-spacing: -0.025em; }
.pro-lead { font-family: var(--font-pro); font-size: 22px; line-height: 32px; font-weight: 400; }
.pro-body { font-family: var(--font-pro); font-size: 17px; line-height: 28px; font-weight: 400; }