/* ═══════════════════════════════════════════════════════════════════════
   APTLY — SHARED THEME TOKENS
   One source of truth for the four themes, used by both the landing
   (index.html) and the app (app.html / app.js).

     Paper      light editorial          body.theme-light  /  [data-theme="light"|"paper"]
     Dark       dark academia (default)  :root             /  [data-theme="dark"]
     Seasonal   dark base + season accent  (data-season="…" — accent-only overrides
                                            live in styles.css, kept as-is)
     Red Pen    blue-black + red/blue     [data-theme="redpen"]

   The gradient wash is ONE recipe (radial accent 7% ┆ radial good 11% ┆
   linear good 4%→bg) built with color-mix against the active tokens, so
   every theme gets a correctly-tinted version of the same formula.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DARK ACADEMIA — default ──────────────────────────────────────────── */
:root,
:root[data-theme="dark"]{
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --hand:'Caveat',cursive;
  --radius-md:4px; --radius-lg:4px;
  --shadow:0 18px 45px rgba(0,0,0,0.28);
  --bg:#16130d; --surface:#1e1a12; --surface-2:#221d15;
  --border:#322c20; --border-strong:#41392a; --border-soft:rgba(236,226,205,0.07);
  --text:#ece2cd; --ink-2:#c7bda4; --sub:#8c8369; --muted:#6b6450;
  --accent:#e07158; --accent-strong:#c2583f; --accent-vivid:#e07158;
  --accent-soft:rgba(224,113,88,0.12);
  --hl:#6ea8fe; --hl-soft:rgba(110,168,254,0.16);
  --good:#9bb072; --good-soft:rgba(155,176,114,0.12);
  --warn:#c79a52; --warn-soft:rgba(199,154,82,0.12); --warn-border:rgba(199,154,82,0.4);
}

/* ── EDITORIAL PAPER — light ──────────────────────────────────────────── */
body.theme-light,
:root[data-theme="light"], :root[data-theme="paper"],
:root[data-theme="light"] body, :root[data-theme="paper"] body{
  --bg:#f5f7fa; --surface:#ffffff; --surface-2:#f8fafc;
  --border:#d9dee7; --border-strong:#c7ceda; --border-soft:#e8ecf2;
  --text:#111827; --ink-2:#273244; --sub:#536174; --muted:#7b8798;
  --accent:#b23a2e; --accent-strong:#9a2f25; --accent-vivid:#b23a2e;
  --accent-soft:rgba(178,58,46,0.08);
  --hl:#2a5fa8; --hl-soft:rgba(42,95,168,0.12);
  --good:#3f6b3a; --good-soft:rgba(63,107,58,0.10);
  --warn:#8a6d1f; --warn-soft:rgba(154,111,46,0.10); --warn-border:#d8c084;
}

/* ── RED PEN — blue-black + red/blue (matches the app) ────────────────── */
:root[data-theme="redpen"],
:root[data-theme="redpen"] body{
  --bg:#0B0E15; --surface:#131826; --surface-2:#1A2130;
  --border:#28324A; --border-strong:#333F5C; --border-soft:rgba(200,214,240,0.07);
  --text:#E8EDF7; --ink-2:#B6C0D2; --sub:#8794AB; --muted:#5C6980;
  --accent:#E5484D; --accent-strong:#C93B40; --accent-vivid:#E5484D;
  --accent-soft:rgba(229,72,77,0.13);
  --accent-gradient:linear-gradient(135deg,#E5484D 0%,#C93B40 45%,#5A9BD8 100%);
  --hl:#5A9BD8; --hl-soft:rgba(90,155,216,0.16);
  --good:#6fbf73; --good-soft:rgba(111,191,115,0.15);
  --warn:#E0A44A; --warn-soft:rgba(224,164,74,0.12); --warn-border:rgba(224,164,74,0.4);
}

/* ── Ambient gradient wash — one recipe, every theme tints it ─────────── */
body{
  background:
    radial-gradient(120% 70% at 6% -8%,
      color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 44%),
    radial-gradient(110% 65% at 100% -4%,
      color-mix(in srgb, var(--good) 11%, transparent) 0%, transparent 50%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--good) 4%, var(--bg)) 0%, var(--bg) 55%);
  background-attachment:fixed;
  color:var(--ink-2);
}

@media (prefers-reduced-motion:no-preference){
  body{transition:background-color .25s ease}
}