/* =========================================================
   BOOK PORN — Redesign tokens
   Loaded BEFORE style.css so every cascading rule inherits.
   Dark is the default; [data-theme="light"] flips variables.
   Driven by the existing dark-mode.js (data-theme attribute).
   ========================================================= */

:root {
  /* Brand */
  --orange: #ff9701;
  --orange-hot: #ffb13a;
  --orange-deep: #d97000;

  /* Supporting retro palette */
  --cream: #f3e3c2;
  --cream-2: #ead4a1;
  --red: #d63a2b;
  --teal: #2d8a8a;
  --plum: #5a2e4c;
  --pink: #e88aa6;
  --blue: #5a8ec2;
  --gold: #e2b13a;
  --ink: #0e0d0c;

  /* Dark mode (default) */
  --bg: #0e0d0c;
  --bg-2: #16140f;
  --surface: #1a1816;
  --surface-2: #221f1c;
  --surface-3: #2a2622;
  --border: #2e2a24;
  --border-soft: #221e19;
  --text: #f5efe6;
  --text-2: #c8c0b0;
  --text-3: #8a847b;
  --text-mute: #6b655c;

  /* Type */
  --font-display: "Bricolage Grotesque", "Recoleta", Georgia, serif;
  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii + shadow */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 12px 30px -18px rgba(0,0,0,0.7);
  --shadow-hover: 0 18px 50px -20px rgba(255,151,1,0.35), 0 8px 30px -10px rgba(0,0,0,0.6);
}

[data-theme="light"] {
  --bg: #f6f1e6;
  --bg-2: #efe7d4;
  --surface: #ffffff;
  --surface-2: #faf4e7;
  --surface-3: #f0e7d2;
  --border: #e7dcc1;
  --border-soft: #efe7d4;
  --text: #1a1714;
  --text-2: #4a443c;
  --text-3: #7a7268;
  --text-mute: #9c9588;
  --ink: #1a1714;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 30px -22px rgba(60,40,10,0.25);
  --shadow-hover: 0 14px 40px -16px rgba(255,151,1,0.5), 0 6px 24px -10px rgba(60,40,10,0.3);
}

/* ---------- Global typography defaults ----------
   Restricted to body & headings only. We deliberately avoid
   restyling links / lists / buttons globally so the existing
   theme styles still win where they need to. */
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* ---------- Subtle page grain (retro print feel) ----------
   Sits behind everything via z-index: 1 + pointer-events: none.
   App content uses position: relative; z-index: 2 implicitly. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  z-index: 1;
  opacity: 0.6;
}

[data-theme="light"] body::before {
  background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
}