/* ──────────────────────────────────────────────────────────────────────
   Design tokens.

   Two themes share one token contract: `paper` (warm daylight notebook) and
   `midnight` (the same notebook under a desk lamp). Every other stylesheet
   reads these variables and never hard-codes a colour.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Type ------------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.8rem;
  --text-base: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2rem, 4.2vw, 3rem);

  --leading-tight: 1.2;
  --leading-normal: 1.55;

  /* Space ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Shape ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* The ruled-paper line spacing; the cover and cells align to it. */
  --rule-height: 28px;
  --sheet-max: 1220px;
  --gutter-width: 72px;

  /* Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;
  --dur-slow: 520ms;
  --dur-ink: 900ms;
}

/* ── Paper (default) ─────────────────────────────────────────────────── */
:root,
:root[data-theme='paper'] {
  --desk-1: #e8dfcd;
  --desk-2: #d8ccb4;
  --desk-3: #c9bda4;

  --paper: #fbf7ef;
  --paper-2: #f4eee1;
  --paper-sunk: #efe7d6;

  --ink: #272019;
  --ink-2: #5c5244;
  --ink-3: #8b8070;
  --ink-faint: #b6ab98;

  --rule: #ddd2bb;
  --rule-strong: #cbbfa4;
  --margin-line: #d2726c;
  --binding: #b9ad94;

  --accent: #2f5d7c;
  --accent-soft: rgba(47, 93, 124, 0.11);
  --accent-ink: #1e4257;
  --highlighter: rgba(246, 206, 94, 0.45);

  --risk-info: #46718f;
  --risk-info-bg: rgba(70, 113, 143, 0.12);
  --risk-notable: #a9711c;
  --risk-notable-bg: rgba(169, 113, 28, 0.14);
  --risk-sensitive: #ab3c38;
  --risk-sensitive-bg: rgba(171, 60, 56, 0.12);

  --ok: #3f7049;
  --ok-bg: rgba(63, 112, 73, 0.13);
  --warn: #a9711c;
  --warn-bg: rgba(169, 113, 28, 0.13);
  --danger: #ab3c38;

  --surface: #ffffff;
  --surface-2: #f7f2e7;
  --border: #e0d6c2;
  --border-strong: #cdc0a7;

  --shadow-sheet: 0 1px 2px rgba(47, 38, 25, 0.07), 0 18px 48px -18px rgba(47, 38, 25, 0.35);
  --shadow-card: 0 1px 2px rgba(47, 38, 25, 0.06), 0 8px 20px -14px rgba(47, 38, 25, 0.4);
  --shadow-pop: 0 12px 40px -12px rgba(47, 38, 25, 0.45);
  --grain-opacity: 0.4;
}

/* ── Midnight ────────────────────────────────────────────────────────── */
:root[data-theme='midnight'] {
  --desk-1: #0b0d12;
  --desk-2: #10131a;
  --desk-3: #161a23;

  --paper: #171b24;
  --paper-2: #1c212c;
  --paper-sunk: #12161e;

  --ink: #e9e4d8;
  --ink-2: #b4ad9e;
  --ink-3: #8a8375;
  --ink-faint: #5d584e;

  --rule: #262c38;
  --rule-strong: #333a49;
  --margin-line: #8a4a46;
  --binding: #3a4150;

  --accent: #7fb0dd;
  --accent-soft: rgba(127, 176, 221, 0.14);
  --accent-ink: #a8cdf0;
  --highlighter: rgba(217, 174, 74, 0.25);

  --risk-info: #7fb0dd;
  --risk-info-bg: rgba(127, 176, 221, 0.14);
  --risk-notable: #d9a94a;
  --risk-notable-bg: rgba(217, 169, 74, 0.15);
  --risk-sensitive: #e0736c;
  --risk-sensitive-bg: rgba(224, 115, 108, 0.14);

  --ok: #71b57f;
  --ok-bg: rgba(113, 181, 127, 0.14);
  --warn: #d9a94a;
  --warn-bg: rgba(217, 169, 74, 0.14);
  --danger: #e0736c;

  --surface: #1e2430;
  --surface-2: #232a37;
  --border: #2c3341;
  --border-strong: #3b4454;

  --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.9);
  --shadow-pop: 0 16px 48px -14px rgba(0, 0, 0, 0.85);
  --grain-opacity: 0.22;
}

/* Honour a system preference on first paint; the toggle overrides it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='paper']):not([data-theme='midnight']) {
    color-scheme: dark;
  }
}