/* tokens.css — Monk Journal design tokens (light + dark).
   Sourced from the colors / fonts / spacing referenced across src/*.jsx.
   When you change a token, every screen tracks it. */

:root {
  /* Type families */
  --serif: 'Fraunces', 'GT Sectra', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Light palette */
  --bg:           #FAF9F6;     /* page */
  --soft:        #F2EFE8;     /* gentle surface */
  --card:        #FFFFFF;
  --ink:         #1A1A1A;     /* primary text */
  --ink-2:       #4A4540;     /* secondary text */
  --ink-3:       #8A847C;     /* muted / meta */
  --border:      #E6E1D8;
  --hair:        #EAE5DA;
  --yellow:      #F4D27A;

  /* Brand */
  --accent:      #E8741A;     /* warm orange — overridable via tweak */
  --accent-tint: rgba(232,116,26,0.10);

  /* Dark band (used on light theme too — fixed dark surface) */
  --dark:        #1A1A1A;
  --dark-text:   #F5EDD8;
  --dark-text-2: rgba(245,237,216,0.72);

  /* Elevation */
  --shadow:       0 6px 18px rgba(30,20,10,0.06), 0 1px 2px rgba(30,20,10,0.05);
  --shadow-hover: 0 12px 32px rgba(30,20,10,0.10), 0 2px 4px rgba(30,20,10,0.06);

  /* Layout */
  --gutter:        24px;
  --topbar-h:      64px;
  --topbar-scrolled-bg: rgba(250,249,246,0.55);
  --video-well:    linear-gradient(135deg, #2a2620 0%, #1A1A1A 60%);
  --dc-inv-zoom:   1;
}

/* ── Dark theme overrides ──────────────────────────────────────────────── */
:root[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"] {
  --bg:           #131210;
  --soft:        #1B1916;
  --card:        #1F1C18;
  --ink:         #F2EBDA;
  --ink-2:       #C8C0AE;
  --ink-3:       #8E867A;
  --border:      #2A2620;
  --hair:        #25221E;
  --yellow:      #CFA94A;

  --accent-tint: rgba(232,116,26,0.18);

  --shadow:       0 6px 22px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-hover: 0 14px 36px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
  --topbar-scrolled-bg: rgba(19,18,16,0.65);
  --video-well:   linear-gradient(135deg, #16140F 0%, #08070A 60%);

  color-scheme: dark;
}