/* ===================================================================
   Pedro Siqueira — Design Tokens
   Calm, editorial, warm-paper-and-ink.
   =================================================================== */

:root {
  /* ---------- COLOR — Paper & Ink ----------
     Almost-monochrome. Newsprint cream against deep warm ink.
     One single accent (oxblood) used like a punctuation mark.
  */
  --paper:        oklch(95.5% 0.018 82);   /* newsprint cream — primary canvas */
  --paper-deep:   oklch(92%   0.022 82);   /* card/elevated paper */
  --sand:         oklch(86%   0.030 80);   /* dividers, soft fills */
  --stone:        oklch(68%   0.015 75);   /* muted ui */
  --ink:          oklch(16%   0.022 55);   /* primary text — near-black warm */
  --ink-soft:     oklch(32%   0.020 55);   /* secondary text */
  --ink-mute:     oklch(52%   0.016 68);   /* tertiary / captions */

  /* ---------- COLOR — Accents ----------
     Single hero accent. Use it like ink on a stamp.
  */
  --terra:        oklch(48%   0.155 35);   /* primary accent — deep oxblood-terracotta */
  --terra-deep:   oklch(38%   0.140 32);   /* hover / pressed */
  --terra-soft:   oklch(86%   0.050 50);   /* tinted background */
  --moss:         oklch(34%   0.060 148);  /* tertiary — used rarely, for diagrams */
  --moss-soft:    oklch(86%   0.035 145);
  --gold:         oklch(72%   0.110 86);   /* used inside the sparkle only */

  /* ---------- COLOR — System ---------- */
  --ink-on-terra:  oklch(96.5% 0.015 78);
  --line:          oklch(82%   0.012 75);  /* hairline rules */
  --line-soft:     oklch(88%   0.012 75);
  --shadow-ink:    20 14% 12%;             /* hsl-ish base for shadow */

  /* ---------- TYPE — Families ---------- */
  --font-display: "Instrument Serif", "Newsreader", Georgia, serif;
  --font-serif:   "Newsreader", "Instrument Serif", Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE — Scale (modular, generous) ---------- */
  --fs-7xl: clamp(72px, 11vw, 168px);
  --fs-6xl: clamp(56px, 8vw, 112px);
  --fs-5xl: clamp(44px, 5.5vw, 80px);
  --fs-4xl: clamp(36px, 4vw, 56px);
  --fs-3xl: 40px;
  --fs-2xl: 32px;
  --fs-xl:  24px;
  --fs-lg:  20px;
  --fs-md:  17px;
  --fs-sm:  15px;
  --fs-xs:  13px;
  --fs-2xs: 11px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;

  --tr-display: -0.025em;
  --tr-tight:   -0.015em;
  --tr-base:    -0.005em;
  --tr-wide:    0.08em;
  --tr-wider:   0.18em;

  /* ---------- SPACE — 4px base, generous ---------- */
  --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;
  --s-11: 192px;

  /* ---------- RADII ---------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:  14px;
  --r-xl:  22px;
  --r-pill: 999px;

  /* ---------- SHADOW (warm, low) ---------- */
  --sh-1: 0 1px 0 oklch(20% 0.02 60 / 0.04), 0 1px 2px oklch(20% 0.02 60 / 0.06);
  --sh-2: 0 2px 0 oklch(20% 0.02 60 / 0.03), 0 6px 18px oklch(20% 0.02 60 / 0.08);
  --sh-3: 0 16px 48px oklch(20% 0.02 60 / 0.10);
}