/* =============================================================
   tokens.css - THE single source of truth. Loads FIRST, before
   styles/v4/v5. Every colour in the app resolves to one of these.
   Light values here; dark values flip under body.dark (one block).
   Refactor goal: kill 640 scattered hardcoded hexes → one palette.
   ============================================================= */
:root{
  /* brand */
  --cherry:#b8002b;      --cherry-2:#8a001f;   --cherry-bg:rgba(184,0,43,.08);
  --blue:#0071e3;        --blue-2:#0058b1;      --blue-bg:rgba(0,113,227,.15); --blue-soft:rgba(0,113,227,.10);
  --lilac:#5e5ce6;       --lilac-bg:rgba(94,92,230,.10);
  --hero-blue:#7cb6ff;

  /* ink (text) */
  --ink-1:#1d1d1f;  --ink-2:#3a3a3c;  --ink-3:#6e6e73;  --ink-4:#a1a1a6;
  --ink-soft:#424245; --ink-faint:#98989d;

  /* surfaces */
  --canvas:#f5f5f7;      /* page background */
  --surface:#ffffff;     /* solid cards */
  --surface-2:#fbfbf9;   /* subtle raised */
  --paper:rgba(255,255,255,.58);   /* frosted glass */
  --paper-2:rgba(255,255,255,.45);
  --paper-3:rgba(255,255,255,.82);
  --line:#e7e7e4;  --line-2:#d9d9d4;
  --rule:rgba(0,0,0,.06);  --rule-soft:rgba(0,0,0,.04);
  --border:rgba(255,255,255,.65);  --border-soft:rgba(255,255,255,.45);

  /* semantic */
  --good:#1b8a3c;  --good-2:#34c759;  --good-fg:#0f6e56;
  --warn:#c47100;  --warn-fg:#8a4b00;
  --mint:#1d9e75;  --teal:#036077;

  /* pastel surfaces + their on-colours */
  --c-lilac:#ece9fe; --on-lilac:#3c3489;
  --c-mint:#e1f5ee;  --on-mint:#0f6e56;
  --c-sky:#e6f1fb;   --on-sky:#0c447c;   --on-ineditsky:#007e9a;
  --c-peach:#faece7; --on-amber:#8a4b00;
  --c-butter:#fbf2da; --c-rose:#fbeaf0;  --c-sage:#eef3e2;
  /* Wave RECS-IMPACT - complete the pastel pairs (butter/rose/sage had
     surfaces but no on-colours at token level; values from the approved
     _DESIGN_RECS_GOAL_IMPACT.html prototype). */
  --on-butter:#8a6a00; --on-rose:#9c1f4b; --on-sage:#4a6320;

  /* the dark "hero" panel (intentionally dark in BOTH modes) */
  --hero-1:#1d1d1f; --hero-2:#161618;

  /* text/icon colour that sits on a filled accent (cherry/blue/hero) - white
     in both light and dark, so it lives here rather than as inline hex. */
  --on-accent:#ffffff;

  /* effects */
  --blur:blur(28px) saturate(180%);  --blur-2:blur(40px) saturate(180%);
  --sh:0 1px 2px rgba(0,0,0,.04), 0 16px 40px rgba(0,0,0,.06);
  --sh-2:0 1px 2px rgba(0,0,0,.04), 0 24px 48px rgba(0,0,0,.10);
  --sh-modal:0 32px 80px rgba(0,0,0,.20);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* font-weight ramp - single source for the type-weight scale. Introduced
     ahead of a mass call-site migration; use these instead of literal 700/
     600/500 so the ramp can be tuned in one place. (Roll-out is incremental;
     existing literals are NOT mass-rewritten in the introducing wave.) */
  --fw-title:700; --fw-strong:600; --fw-body:500;
}

/* ─── DARK - re-map the same names. One place flips the whole app. ─── */
body.dark{
  --cherry:#ff3b5f;  --cherry-2:#ff5675;  --cherry-bg:rgba(255,59,95,.16);
  --blue:#3897ff;    --blue-2:#5aa6ff;    --blue-bg:rgba(56,151,255,.22);  --blue-soft:rgba(56,151,255,.14);
  --lilac:#8e8bff;   --lilac-bg:rgba(142,139,255,.18);

  --ink-1:#f5f5f7;  --ink-2:#d3d3d6;  --ink-3:#9b9ba1;  --ink-4:#74747c;
  --ink-soft:#c4c4c8; --ink-faint:#6e6e76;

  --canvas:#0c0c0f;
  --surface:#1c1c20;
  --surface-2:#232328;
  --paper:rgba(44,44,50,.62);
  --paper-2:rgba(44,44,50,.48);
  --paper-3:rgba(52,52,58,.9);
  --line:#2c2c31;  --line-2:#37373d;
  --rule:rgba(255,255,255,.09);  --rule-soft:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.10);  --border-soft:rgba(255,255,255,.07);

  --good:#44c98a; --good-2:#5fe0a0; --good-fg:#8ee9c4;
  --warn:#ffb45a; --warn-fg:#f2d479; --mint:#44c98a; --teal:#6cb6c8;

  --c-lilac:#2a2752; --on-lilac:#c5c0ff;
  --c-mint:#16352b;  --on-mint:#8ee9c4;
  --c-sky:#13314f;   --on-sky:#9ccbff;  --on-ineditsky:#7fd6e6;
  --c-peach:#3d2a1c; --on-amber:#f2d479;
  --c-butter:#3a3318; --c-rose:#3a1f2c; --c-sage:#22331e;
  --on-butter:#f2d479; --on-rose:#ff9fc0; --on-sage:#bcd98a;

  --sh:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
  --sh-2:0 1px 2px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.55);
  --sh-modal:0 32px 80px rgba(0,0,0,.6);
}

/* The dark gradient backdrop the canvas sits under (both modes use the
   soft wash; dark just deepens it). */
body.v4{
  background:
    radial-gradient(ellipse 900px 600px at 12% 8%, rgba(180,170,255,.16), transparent),
    radial-gradient(ellipse 800px 600px at 88% 18%, rgba(255,190,150,.13), transparent),
    radial-gradient(ellipse 700px 700px at 50% 100%, rgba(150,220,190,.15), transparent),
    var(--canvas) !important;
  background-attachment:fixed;
}
body.v4.dark{
  background:
    radial-gradient(ellipse 900px 600px at 12% 8%, rgba(94,92,230,.20), transparent),
    radial-gradient(ellipse 800px 600px at 88% 18%, rgba(184,0,43,.13), transparent),
    radial-gradient(ellipse 700px 700px at 50% 100%, rgba(0,113,227,.15), transparent),
    var(--canvas) !important;
}

/* ── Hygiene ── */
/* Chart segment colours for js/pages/stats.js SEGS (GI03 palette) -
   audio = deep blue (podcast identity), spotify = brand green.
   Defined here so the JS references var(--chart-audio)/var(--chart-spotify)
   instead of literal hex. */
:root{
  --chart-audio:#1652a8;
  --chart-spotify:#1db954;
}