/* ============================================================
   Shared design tokens — fishpole-frontend

   This file has sibling copies, not a shared import: the portal's copy
   is fishpole-portal/client/src/tokens.css (added by S267), and
   ccc-homepage's copy is theme/tokens.css (S273, still pending). Keep
   the shared names in sync by hand across all three — this file does
   not verify or enforce that they match.

   Source: docs/design-refs/shared-tokens-proposal.css (S260 plan).
   S266 applies it here for the first time — every sales page used to
   duplicate its own inline :root block instead of loading a shared
   file. This sheet absorbs that dark system as the default :root,
   then aliases every OLD variable name the pages actually reference
   (grepped from all 30 inline :root blocks + every var(--x) use) so
   removing those inline blocks changes nothing visually.

   Legacy-alias policy for this refactor pass (S266 is structure only,
   no redesign): where an old name collides with a *different* value
   in the new proposal (only --gold and --purple do), the OLD value
   wins so today's pages render pixel-identical. Flagged here, not
   resolved silently — the redesign pass reconciles it on purpose.
   ============================================================ */

:root {
  /* ---- dark base (marketing canon: astrologerapp research §4b) ---- */
  --ground: #09090e;
  --ground-2: #111119;
  --panel: #101018;
  --cream: #f0ece4;          /* body text        16.86:1 on --ground */
  --muted: #ddd8ce;          /*                  13.99:1 */
  --dim: #c8c0b0;            /*                  11.00:1 */
  --faint: #9a8e78;          /*                   6.16:1 */
  --gold-bright: #d4a940;    /*                   9.03:1 */
  --gold: var(--gold-bright); /* --gold-bright is the effective marketing gold —
                                  every page's inline block actually rendered
                                  this bright shade, not the proposal's darker
                                  "star gold" kept below as --gold-bright-dim
                                  (see legacy-alias policy note above). */
  --gold-bright-dim: #b8965a; /* the proposal's original "star gold" —
                                  reachable on purpose whenever the redesign
                                  wants the dimmer tone. */
  --gold-lt: #e0be5c;
  --gold-label: #e8cb86;     /* label gold on dark  12.04:1 */
  --line: rgba(240, 236, 228, 0.12);

  /* ---- fishpole brights (ACCENTS ONLY, never body text) ---- */
  --pink: #ff1495;
  --green: #c1ff72;
  --yellow: #ffde59;
  --purple-accent: #642ec7;  /* renamed from the proposal's bare --purple —
                                 see legacy-alias policy note above; the
                                 pages' existing --purple (#8b5cf6) keeps
                                 that name so nothing re-renders differently */
  --grad-iris: linear-gradient(90deg, #ff4fa3, #ffd36e, #c7f94b, #61e0c8, #6aa8ff, #b97cff);
  --grad-gold: linear-gradient(135deg, #f2e0a6, #c7a24c 55%, #9c7a2e);

  /* ---- CCBBB accent layer (subtle on CCBBB pages; portal identity) ---- */
  --ccbbb-purple: #7d02b6;   /* white on it: 8.22:1 */
  --ccbbb-violet: #7100e2;   /* white on it: 7.50:1 */
  --ccbbb-magenta: #ff0066;
  --ccbbb-lime: #c8f540;     /* ACCENT ONLY — ruled never a text color */

  /* ---- VSP layer (practitioner page ONLY; pentagram lives only there) ---- */
  --vsp-lavender: #cabffc;   /* 11.70:1 on --ground */
  --vsp-ground: #100a26;
  --vsp-hero-text: #f5f2ff;  /* 17.40:1 on --vsp-ground */

  /* ---- typography (the old small-caps display face is gone everywhere) ---- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-editorial: "Lora", Georgia, serif;
  --font-button: var(--font-body);   /* weight 700 — the ledger's bold sans */
  --font-label: var(--font-body);    /* weight 600, uppercase, letterspaced — replaces the old caps face */

  --radius: 5px;
  --measure: 65ch;

  /* ============================================================
     Legacy aliases — the exact old names every sales page's inline
     :root used to declare, kept so the inline-block removal is a
     pure refactor. Grepped from every page's index.html under public/.
     ============================================================ */
  --bg: var(--ground);                       /* #09090e — identical */
  --bg2: var(--ground-2);                    /* #111119 — identical */
  --gold-dim: #c9a84c;                       /* old-only shade, no canonical match */
  --purple: #8b5cf6;                         /* old page accent — see policy note above */
  --purple-deep: #6d3fc4;
  --purple-dim: #7c4ddb;
  --purple-glow: rgba(139, 92, 246, 0.15);
  --purple-light: rgba(139, 92, 246, 0.25);  /* enroll/version-b only */
  --purple-faint: rgba(139, 92, 246, 0.10);  /* enroll/version-b only */
  --serif-display: var(--font-display);
  --serif-body: var(--font-editorial);
  --caps: var(--font-label);                 /* every var(--caps) on every page now renders Inter, not the old caps face */
  --error: #e05c5c;                          /* audit/apply only */

  /* enroll/version-b.html's own legacy light-theme names — aliased to the
     shared tokens (not hardcoded) so the light-theme block below flips
     them too. */
  --white: var(--ground-2);
  --text: var(--cream);
  --text-light: var(--dim);
  --text-faint: var(--faint);
  --border: rgba(212, 169, 64, 0.15);
  --font: var(--font-display);
  --gray-bg: var(--ground-2);
  --magenta: var(--purple);
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================
   Rules in this section are the canonical version for every page that
   loads tokens.css. A page must NOT redefine one of these selectors in
   its own inline <style> block — if a page needs a different look it
   should use a different class name, not a local override.

   .btn-primary (S266 part 2 code-review finding 9): a page-local
   .btn-primary once carried white text on a gold->purple gradient,
   measuring 2.22:1 contrast (see test/pages/home.test.mjs). This gold-only
   surface + dark ink clears >=4.5:1 against every --grad-gold stop.
   ============================================================ */

.btn-primary {
  display: inline-block;
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 18px 44px;
  border: none;
  color: #161006;
  background: var(--grad-gold);
  text-decoration: none;
  transition: all 0.25s;
}

.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 20px rgba(212,169,64,0.35);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---- light theme (portal light mode; email/e-commerce contexts) ---- */
@media (prefers-color-scheme: light) {
  [data-theme-scheme="system"] {
    --ground: #faf7f0;
    --ground-2: #ffffff;
    --panel: #ffffff;
    --cream: #161310;        /* ink · 17.30:1 on bone   */
    --muted: #6b6156;        /*        5.66:1           */
    --dim: #6b6156;
    --faint: #786d5d;        /*        4.74:1 (replaces #948976 which failed at 3.22:1) */
    --gold: #c7a24c;
    --gold-bright: #9c7a2e;
    --gold-label: #8a6a22;   /*        4.71:1           */
    --line: #e9e0cc;
  }
}

/* Marketing pages stay fixed-dark: they simply never set
   data-theme-scheme="system". The portal shell sets it to opt into the
   system scheme (S267 wires Tailwind colors onto these variables). */