/* ============================================================================
   RankCause — app ↔ marketing branding bridge

   The logged-out site runs on `marketing.css` (docs/DESIGN_SYSTEM.md): cool
   paper, a deep-teal accent, Instrument Sans/Serif, JetBrains Mono for data.
   The signed-in app ran on two older token systems — `--ps-*` from
   design-system.css and the legacy `--bg`/`--text`/`--accent` set from
   main.css — which rendered warm cream with an amber accent.

   The effect was that signing in felt like arriving at a different product.

   This file is the bridge. It redefines the APP's colour tokens in terms of
   the marketing tokens, so all 46 internal templates inherit the brand
   without a single one being edited. Loaded LAST in base.html so it wins.

   TWO RULES FOR EDITING THIS FILE

   1. Colour tokens only. `--ps-text-muted` and `--ps-text-dim` are colours,
      but `--ps-text-xs` … `--ps-text-4xl` are FONT SIZES. Remapping a size
      onto a colour silently destroys every page that uses it. Sizes are
      deliberately left alone here.

   2. Never change layout, spacing or component structure from this file.
      This is a repaint, not a rebuild — the app's information architecture
      is not this file's business.
   ========================================================================= */

/* The marketing palette, restated here so the app does not depend on
   marketing.css being loaded on internal pages. Keep in sync with
   frontend/static/css/marketing.css — these are the same values. */
:root {
  --mk-ink-900: #0B0D0F;  --mk-ink-800: #1A1F24;  --mk-ink-600: #3D464F;
  --mk-ink-400: #6B747D;  --mk-ink-300: #9AA3AC;
  --mk-paper: #FFFFFF;    --mk-paper-soft: #FAFBFC;  --mk-paper-sunk: #F1F3F5;
  --mk-rule: #E4E7EA;     --mk-rule-firm: #D8DCE0;
  --mk-accent: #0F5F5B;   --mk-accent-ink: #0A4340;  --mk-accent-wash: #E8F1F0;
  --mk-on-accent: #FFFFFF;
  --mk-good: #146B3A;     --mk-good-wash: #E7F2EB;
  --mk-warn: #8A5A00;     --mk-warn-wash: #FBF2DF;
  --mk-crit: #A6231B;     --mk-crit-wash: #FBEAE8;
  /* Fourth semantic step, app-only — see docs/APP_UX_SPEC.md. The marketing
     site has three semantics (good/warn/crit); the app's ranking bands have
     four (top-3 / top-10 / top-20 / beyond), and collapsing the third onto
     warn would make positions 4-10 and 11-20 render identically. Safe as a
     hue-only step because the rank number is always displayed beside it. */
  --mk-warn-deep: #8E4410; --mk-warn-deep-wash: #F7EDE4;
  /* Contrast PAIRS for text on a filled semantic. There is no single "ink over
     data" colour: measured, white clears AA on all four LIGHT semantics
     (5.9-7.3:1) and fails on all four DARK ones (2.2-2.5:1), because the
     semantics invert between themes. So each carries its own label colour and
     flips with the theme, exactly as --mk-on-accent already does. */
  --mk-on-good: #FFFFFF; --mk-on-warn: #FFFFFF;
  --mk-on-warn-deep: #FFFFFF; --mk-on-crit: #FFFFFF;
  --mk-display: "Instrument Serif", ui-serif, Georgia, serif;
  --mk-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mk-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Light ──────────────────────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  /* Legacy set (main.css) */
  --bg:             var(--mk-paper-soft);
  --bg-card:        var(--mk-paper);
  --bg-card-hover:  var(--mk-paper-sunk);
  --bg-input:       var(--mk-paper);
  --bg-elevated:    var(--mk-paper);
  --bg-lighter:     var(--mk-paper-sunk);
  --bg-tinted:      var(--mk-paper-sunk);
  --border:         var(--mk-rule);
  --border-light:   var(--mk-rule-firm);
  --text:           var(--mk-ink-900);
  --text-muted:     var(--mk-ink-600);
  --text-dim:       var(--mk-ink-400);
  --text-secondary: var(--mk-ink-600);
  --text-faint:     var(--mk-ink-300);
  --accent:         var(--mk-accent);
  --accent-hover:   var(--mk-accent-ink);
  --accent-dim:     var(--mk-accent-wash);
  --green:          var(--mk-good);
  --green-dim:      var(--mk-good-wash);
  --red:            var(--mk-crit);
  --red-dim:        var(--mk-crit-wash);
  --yellow:         var(--mk-warn);
  --yellow-dim:     var(--mk-warn-wash);
  --amber:          var(--mk-warn);
  --amber-dim:      var(--mk-warn-wash);
  --orange:         var(--mk-warn-deep);
  --orange-dim:     var(--mk-warn-deep-wash);
  --blue:           var(--mk-accent);
  --blue-dim:       var(--mk-accent-wash);
  --purple:         var(--mk-accent);
  --purple-dim:     var(--mk-accent-wash);

  /* Design-system set (--ps-*). COLOURS ONLY — see rule 1 above. */
  --ps-bg:            var(--mk-paper-soft);
  --ps-bg-subtle:     var(--mk-paper-sunk);
  --ps-surface:       var(--mk-paper);
  --ps-surface-2:     var(--mk-paper-sunk);
  --ps-border:        var(--mk-rule);
  --ps-border-strong: var(--mk-rule-firm);
  --ps-text:          var(--mk-ink-900);
  --ps-text-muted:    var(--mk-ink-600);
  --ps-text-dim:      var(--mk-ink-400);
  --ps-accent:        var(--mk-accent);
  --ps-accent-hover:  var(--mk-accent-ink);
  --ps-success:       var(--mk-good);
  --ps-danger:        var(--mk-crit);
  --ps-warning:       var(--mk-warn);
  --ps-info:          var(--mk-accent);

  /* Brand ramp — collapsed onto the single accent. The app previously used a
     nine-step purple/amber ramp decoratively; the system reserves colour for
     meaning, so the ramp now steps in opacity rather than hue. */
  --ps-brand-50:  var(--mk-accent-wash);
  --ps-brand-100: var(--mk-accent-wash);
  --ps-brand-200: color-mix(in srgb, var(--mk-accent) 18%, var(--mk-paper));
  --ps-brand-300: color-mix(in srgb, var(--mk-accent) 32%, var(--mk-paper));
  --ps-brand-400: color-mix(in srgb, var(--mk-accent) 55%, var(--mk-paper));
  --ps-brand-500: var(--mk-accent);
  --ps-brand-600: var(--mk-accent);
  --ps-brand-700: var(--mk-accent-ink);
  --ps-brand-800: var(--mk-accent-ink);
  --ps-brand-900: var(--mk-accent-ink);

  --ps-crimson: var(--mk-crit);
  --ps-orange:  var(--mk-warn-deep);
  --ps-amber:   var(--mk-warn);
  --ps-emerald: var(--mk-good);

  /* --prism-* : the palette behind base.html's inline "Claude design overlay",
     which paints the app chrome (sidebar, header, cards, buttons, forms,
     tables) with `!important`. That overlay is doing real work and is left
     in place — remapping its palette here repoints all 26 of its rules at
     the marketing brand without touching a single component rule. This is
     why the app was still rendering cream after the first bridge pass. */
  --prism-cream:       var(--mk-paper-soft);
  --prism-cream-deep:  var(--mk-paper-sunk);
  --prism-paper:       var(--mk-paper);
  --prism-ink:         var(--mk-ink-900);
  --prism-ink-soft:    var(--mk-ink-800);
  --prism-muted:       var(--mk-ink-600);
  --prism-faint:       var(--mk-ink-400);
  --prism-rule:        var(--mk-rule);
  --prism-rule-soft:   var(--mk-rule);
  --prism-accent:      var(--mk-accent);
  --prism-accent-soft: var(--mk-accent-wash);
  --prism-accent-deep: var(--mk-accent-ink);
  --prism-serif:       var(--mk-display);
  --prism-sans:        var(--mk-sans);

  /* Type families. Sizes are NOT touched — the app's density depends on
     them, and this is a repaint. */
  --ps-font-sans: var(--mk-sans);
  --ps-font-mono: var(--mk-mono);
}

/* ── Dark ───────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --mk-ink-900: #F2F5F7;  --mk-ink-800: #DCE2E7;  --mk-ink-600: #AAB4BD;
  --mk-ink-400: #7F8891;  --mk-ink-300: #5D666F;
  --mk-paper: #0C0F12;    --mk-paper-soft: #12161A;  --mk-paper-sunk: #171C21;
  --mk-rule: #232A31;     --mk-rule-firm: #2E363E;
  --mk-accent: #5FBFB6;   --mk-accent-ink: #8FD6CF;  --mk-accent-wash: #11302E;
  --mk-on-accent: #07211F;
  --mk-good: #6FC08D;     --mk-good-wash: #10281A;
  --mk-warn: #D9A441;     --mk-warn-wash: #2C2310;
  --mk-crit: #E88A82;     --mk-crit-wash: #2E1715;
  --mk-warn-deep: #E29A5E; --mk-warn-deep-wash: #2B1C11;
  --mk-on-good: #07211F; --mk-on-warn: #07211F;
  --mk-on-warn-deep: #07211F; --mk-on-crit: #07211F;

  /* In dark the app surface sits ABOVE the page ground, so card and page
     swap roles relative to light — otherwise cards disappear into the page. */
  --bg:            var(--mk-paper);
  --bg-card:       var(--mk-paper-soft);
  --bg-card-hover: var(--mk-paper-sunk);
  --bg-input:      var(--mk-paper-sunk);
  --ps-bg:         var(--mk-paper);
  --ps-surface:    var(--mk-paper-soft);
  --ps-surface-2:  var(--mk-paper-sunk);

  /* Same swap for the overlay palette in dark. */
  --prism-cream:       var(--mk-paper);
  --prism-cream-deep:  var(--mk-paper-soft);
  --prism-paper:       var(--mk-paper-soft);
  --prism-rule:        var(--mk-rule);
  --prism-rule-soft:   var(--mk-rule);
}

/* ── Typography ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--mk-sans);
  -webkit-font-smoothing: antialiased;
}

/* Page titles pick up the display face, matching the marketing pages. Kept to
   h1 only: the app is a working surface, and a serif on every heading would
   slow scanning. */
h1, .page-title, .ps-page-title {
  font-family: var(--mk-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}

code, pre, kbd, samp, .mono, [class*="mono"] { font-family: var(--mk-mono); }

/* Numbers align in columns. The app is full of metrics and tables; digits
   that jitter between rows undermine a measurement product. */
table td, table th,
.metric, .metric-value, [class*="metric"], [class*="stat-"],
[class*="-score"], .num, .tabular {
  font-variant-numeric: tabular-nums;
}

/* ── Focus — one visible treatment everywhere ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 2px;
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Dark for pages that cannot theme themselves ────────────────────────────
   Four pages are deliberately standalone and do not load theme.js: the
   checkout screen, the two affiliate pages and the public share dashboard.
   Nothing ever sets data-theme on them, so before this they rendered light
   for everyone — a reader with OS dark got a blinding white page at exactly
   the moment they were being asked to pay.

   marketing.css solves this with `:root:not([data-theme="light"])`. Copying
   that guard here would have been a bug: in the app, choosing light REMOVES
   the attribute rather than setting it to "light" (see applyTheme in
   base.html), so that selector also matches every app user who explicitly
   chose light — they would have been forced into dark by their OS setting.

   So this is opt-in instead: only a page that marks itself `data-theme-auto`
   follows the OS, and an explicit data-theme always wins. App pages carry no
   marker and are untouched, which also means no theme flash on them.
   Keep these declarations in sync with the block above — a test enforces it. */
@media (prefers-color-scheme: dark) {
  :root[data-theme-auto]:not([data-theme]) {
  --mk-ink-900: #F2F5F7;  --mk-ink-800: #DCE2E7;  --mk-ink-600: #AAB4BD;
  --mk-ink-400: #7F8891;  --mk-ink-300: #5D666F;
  --mk-paper: #0C0F12;    --mk-paper-soft: #12161A;  --mk-paper-sunk: #171C21;
  --mk-rule: #232A31;     --mk-rule-firm: #2E363E;
  --mk-accent: #5FBFB6;   --mk-accent-ink: #8FD6CF;  --mk-accent-wash: #11302E;
  --mk-on-accent: #07211F;
  --mk-good: #6FC08D;     --mk-good-wash: #10281A;
  --mk-warn: #D9A441;     --mk-warn-wash: #2C2310;
  --mk-crit: #E88A82;     --mk-crit-wash: #2E1715;
  --mk-warn-deep: #E29A5E; --mk-warn-deep-wash: #2B1C11;
  --mk-on-good: #07211F; --mk-on-warn: #07211F;
  --mk-on-warn-deep: #07211F; --mk-on-crit: #07211F;

  /* In dark the app surface sits ABOVE the page ground, so card and page
     swap roles relative to light — otherwise cards disappear into the page. */
  --bg:            var(--mk-paper);
  --bg-card:       var(--mk-paper-soft);
  --bg-card-hover: var(--mk-paper-sunk);
  --bg-input:      var(--mk-paper-sunk);
  --ps-bg:         var(--mk-paper);
  --ps-surface:    var(--mk-paper-soft);
  --ps-surface-2:  var(--mk-paper-sunk);

  /* Same swap for the overlay palette in dark. */
  --prism-cream:       var(--mk-paper);
  --prism-cream-deep:  var(--mk-paper-soft);
  --prism-paper:       var(--mk-paper-soft);
  --prism-rule:        var(--mk-rule);
  --prism-rule-soft:   var(--mk-rule);
  }
}