/* ─────────────────────────────────────────────────────────────────────
   suite-palette.css — WP3 of the domain consolidation (Phase 1g).

   WHAT THIS IS
   ------------
   A thin *token bridge*. The pennasystems suite marketing pages were built
   on the CREAM vocabulary (--paper / --ink / --rule / --gold, plus the
   --slate-* ladder from penna-tokens.css). Rune's 2026-08-26 decision
   (docs/decisions/domain_consolidation_2026-08-26.md, D-2) retires the
   cream palette FROM SUITE MARKETING PAGES and adopts the PennaPay --pp-*
   colour system in BOTH light and dark.

   Typography, layout, spacing, radii and every other part of the
   pennasystems style are DELIBERATELY untouched: --serif / --sans / --mono
   and the --space-* / --radius-* scales are not redefined here. Only
   colour tokens are remapped.

   HOW IT WORKS
   ------------
   Every colour token is re-pointed at the corresponding var(--pp-*) from
   css/pennapay-theme.css, which must be linked BEFORE this file. That
   keeps ONE source of truth for the brand palette: if the --pp-* values
   ever change, the suite pages follow automatically instead of drifting
   into a third palette. This is the same mapping pricing.html has been
   running in production under `body.is-pennapay` since 2026-06-08 —
   promoted from a hostname-gated page skin to the suite-wide default.

   The --pp-* values themselves flip by [data-theme], so the mapping below
   is theme-agnostic; the dark block re-asserts the identical mapping only
   to out-specify css/marketing-theme.css, whose `:root[data-theme="dark"]`
   block (0,2,0) would otherwise pull the cream values back in.

   LOAD ORDER (required)
   ---------------------
     pennasystems-styles.css      (or penna-tokens.css on pennaaid.html)
     css/extracted-inline.css
     css/marketing-theme.css      ← keeps .sub-shot-img theme-gating etc.
     css/pennapay-theme.css       ← defines --pp-*
     css/suite-palette.css        ← THIS FILE, last

   SPECIFICITY
   -----------
   `:root:root` is (0,2,0) and beats pennasystems-styles.css's `:root`
   (0,1,0). `:root:root[data-theme="dark"]` is (0,3,0) and beats both
   penna-tokens.css and marketing-theme.css dark blocks (0,2,0),
   regardless of source order — so a future stylesheet reshuffle cannot
   silently reinstate cream.

   WHAT IS *NOT* REMAPPED (on purpose)
   -----------------------------------
   • Per-module brand colours hardcoded in each module page's inline
     <style> (PennaConnect #007696, PennaSchedule #2e64a8, PennaWelcome
     #d24a5d, PennaVentory #9c5719, PennaFolio #006b5c, PennaShare
     #0073a7, PennaSystems #c1a551, PennaPay #335e43). Those are brand
     identity, not palette.
   • The frozen product mockups (.pp-dash-* on pennasystems-pennapay.html
     and the sample-invoice/PDF blocks). They are hardcoded literals by
     design and stay at their designed LIGHT look in both themes — never
     dark-invert a sheet of paper.
   • The app shell. penna-tokens.css keeps its cream values untouched;
     this file is only linked from suite marketing pages.
   ───────────────────────────────────────────────────────────────────── */

:root:root,
:root:root[data-theme="light"],
:root:root[data-theme="dark"] {
  /* ── Paper / ink — the pennasystems + app vocabulary ─────────────── */
  --paper:    var(--pp-bg);
  --paper-hi: var(--pp-surface);
  --paper-lo: var(--pp-surface-2);
  --ink:      var(--pp-heading);
  --ink-2:    var(--pp-text-2);
  /* --muted is set per-theme below — see the A11Y note there. */
  --rule:     var(--pp-border);
  --gold:     var(--pp-accent);
  --gold-text: var(--pp-accent-text);
  --on-gold:  var(--pp-on-accent-dark);

  /* ── pennapay marketing vocabulary (marketing-theme.css sets these in
        dark; keep them coherent so any shared component follows) ───── */
  --bg:       var(--pp-bg);
  --bg-off:   var(--pp-surface);
  --ink-soft: var(--pp-text-2);

  /* ── `--ps-*` vocabulary used by the module pages' lang-toggle ─────
        These were NEVER defined anywhere, so every reference fell back to
        the literals `#555` / `#000`. That is a latent dark-mode bug: on a
        dark page the language toggle rendered near-black on near-black.
        Defining them here fixes it and makes the toggle theme-aware. */
  --ps-ink:      var(--pp-heading);
  --ps-ink-soft: var(--pp-text-2);

  /* ── Legacy slate ladder — mirrors the alias structure in
        penna-tokens.css so the ~284 inline var(--slate-*) references on
        pennaaid.html / changelogs.html theme correctly. Ordered light →
        dark exactly as the original scale intends. ─────────────────── */
  --slate-50:  var(--pp-surface);
  --slate-100: var(--pp-surface-2);
  --slate-200: var(--pp-border);
  --slate-300: var(--pp-border-3);
  --slate-400: var(--pp-muted);
  --slate-500: var(--pp-muted);
  --slate-600: var(--pp-text-2);
  --slate-700: var(--pp-text-2);
  --slate-800: var(--pp-text);
  --slate-900: var(--pp-heading);

  /* ── Legacy accent aliases ───────────────────────────────────────── */
  --accent:       var(--pp-accent);
  --accent-dark:  var(--pp-accent-strong);
  --accent-light: var(--pp-accent-soft);

  /* ── marketing-clip.css poster frame. It asks for --pp-slate-100 /
        --pp-slate-500, which pennapay-theme.css does not define, so it
        was pinned to light literals in both themes. Point them at the
        real surface tokens so the clip frame stops glowing white on a
        dark page. The clip/poster CONTENT is untouched — that is
        product footage and stays at its captured light look. ───────── */
  --pp-slate-100: var(--pp-surface-2);
  --pp-slate-500: var(--pp-muted);
}

/* ── --muted, per theme (A11Y) ────────────────────────────────────────
   --muted carries the footer column headings, captions and eyebrows, and
   the footer sits on the TINTED --paper-lo band rather than on --paper.

   In LIGHT that band is --pp-surface-2 (#f1f5f9), and the ordinary
   --pp-muted (#64748b) lands at 4.34:1 there — a WCAG-AA near-miss, and
   the one real regression the palette swap introduced (on cream the same
   text sat on #ECE4D2 and passed). pennapay-theme.css already ships the
   token for exactly this case: --pp-muted-2 (#5a6b7d), documented as
   "≥4.5:1 on #fff/#f1f5f9/#fbf6ea". Measured after this change:
     #5a6b7d on #ffffff (--pp-bg)        → 5.47:1  ✅
     #5a6b7d on #f8fafc (--pp-surface)   → 5.34:1  ✅
     #5a6b7d on #f1f5f9 (--pp-surface-2) → 4.98:1  ✅

   In DARK the plain --pp-muted (#93a596) is already comfortable on every
   surface (6.79 / 5.95 / 5.20:1), and --pp-muted-2 (#7a8c7d) would drop
   to 4.35:1 on --pp-surface — i.e. swapping there would make it worse.
   So the darker token is applied to LIGHT only, deliberately. */
:root:root,
:root:root[data-theme="light"] {
  --muted: var(--pp-muted-2);
}
:root:root[data-theme="dark"] {
  --muted: var(--pp-muted);
}

/* ── --ink-as-fill guards ─────────────────────────────────────────────
   `--ink` is a *foreground* token that inverts to near-white in dark.
   pennasystems-styles.css uses it as a BACKGROUND in three places
   (.ps-btn, and pricing's .pr-badge / toggle pills reuse the same
   pattern). That inversion is the EXISTING, intentional design — the
   cream palette already produced a light button with dark text in dark
   mode — so the pairing is preserved rather than "fixed". The pairing is
   only safe while the label token is the surface token, which the
   mapping above guarantees (--paper-hi → --pp-surface, which is always
   the opposite end of the scale from --pp-heading). Documented here so a
   future edit does not break the pair by touching only one side. */

/* ── Focus ring on the fan feathers ──────────────────────────────────
   `drop-shadow(... var(--ink))` in pennasystems-styles.css is a
   foreground use of --ink and stays correct in both themes. No override
   needed; noted so the grep for var(--ink) has an answer. */