/* ============================================================================
   PRIOR MOVES — Design tokens v2 · "The Fold"
   Dark-native, light-capable. Drop-in CSS custom properties.

   THE ONE RULE: solid = disclosed record · ghost/dashed = predicted reflection.
   Cyan (--pm-predicted) is reserved for predictions ONLY. Blue (--pm-action)
   is interactive ONLY. Never gradients. Every figure in mono, tabular.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..800;1,6..72,400..800&family=Libre+Franklin:wght@400;500;600;700;800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* ---- Canvas & surfaces ---------------------------------------------- */
  --pm-bg: #0b0f19; /* page — ink navy, flat. No glow, no gradient. */
  --pm-surface-1: #111725; /* card */
  --pm-surface-2: #151d2e; /* raised / nested */
  --pm-surface-3: #1b2536; /* hover surface */
  --pm-border: #232d42; /* hairline */
  --pm-border-strong: #395377; /* hover / selected border */
  --pm-divider: rgba(151, 163, 184, 0.14);
  --pm-fold: #232d42; /* the fold line between record and forecast */

  /* ---- Foreground ------------------------------------------------------ */
  --pm-fg-1: #edf1f8;
  --pm-fg-2: #97a3b8;
  --pm-fg-3: #66718a;

  /* ---- Action (interactive ONLY — buttons, links, focus) --------------- */
  --pm-action: #477bea;
  --pm-action-hover: #5c8df0;
  --pm-action-ink: #0b0f19; /* text on action fills */
  --pm-link: #7aa3f2;
  --pm-focus-ring: 0 0 0 2px #0b0f19, 0 0 0 4px #7aa3f2;

  /* ---- Predicted (the reflection — predictions ONLY) ------------------- */
  --pm-predicted: #43c6db;
  --pm-predicted-ink: #a9e6f0;
  --pm-predicted-soft: rgba(67, 198, 219, 0.1);
  --pm-predicted-border: rgba(67, 198, 219, 0.45); /* always dashed */

  /* ---- Semantics (colorblind-safe; never pure red/green) --------------- */
  --pm-up: #3ec08e;
  --pm-up-soft: rgba(62, 192, 142, 0.13);
  --pm-down: #e0925a;
  --pm-down-soft: rgba(224, 146, 90, 0.13);
  --pm-gold: #d9a83c; /* conviction stars only */
  --pm-gold-soft: rgba(217, 168, 60, 0.12);
  --pm-error: #e5645a; /* hard errors / destructive only */

  /* ---- Data marks ------------------------------------------------------ */
  --pm-series-actual: #c6d0e0; /* disclosed / realized lines: solid neutral */
  --pm-series-benchmark: #66718a; /* benchmark: thin, dotted */
  --pm-ci-fill: rgba(198, 208, 224, 0.1); /* confidence band */
  --pm-score-track: rgba(151, 163, 184, 0.16);
  --pm-score-fill: #477bea; /* flat — width encodes the score */

  /* ---- Elevation -------------------------------------------------------- */
  --pm-shadow-rest: none; /* structure = borders, not shadow */
  --pm-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.3);
  --pm-shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] {
  color-scheme: light;

  --pm-bg: #f7f5f0; /* warm paper */
  --pm-surface-1: #ffffff;
  --pm-surface-2: #fbfaf6;
  --pm-surface-3: #f0ede5;
  --pm-border: #e3dfd4;
  --pm-border-strong: #aeb9cf;
  --pm-divider: rgba(22, 28, 42, 0.1);
  --pm-fold: #ddd8ca;

  --pm-fg-1: #161c2a;
  --pm-fg-2: #525c70;
  --pm-fg-3: #848da0;

  --pm-action: #2d5fd0;
  --pm-action-hover: #2450b4;
  --pm-action-ink: #ffffff;
  --pm-link: #2d5fd0;
  --pm-focus-ring: 0 0 0 2px #f7f5f0, 0 0 0 4px #2d5fd0;

  --pm-predicted: #0c93a8;
  --pm-predicted-ink: #086d7d;
  --pm-predicted-soft: rgba(12, 147, 168, 0.08);
  --pm-predicted-border: rgba(12, 147, 168, 0.5);

  --pm-up: #17805a;
  --pm-up-soft: rgba(23, 128, 90, 0.1);
  --pm-down: #ad5d1e;
  --pm-down-soft: rgba(173, 93, 30, 0.1);
  --pm-gold: #96701b;
  --pm-gold-soft: rgba(150, 112, 27, 0.12);
  --pm-error: #bd3a31;

  --pm-series-actual: #39424f;
  --pm-series-benchmark: #848da0;
  --pm-ci-fill: rgba(22, 28, 42, 0.06);
  --pm-score-track: rgba(22, 28, 42, 0.1);
  --pm-score-fill: #2d5fd0;

  --pm-shadow-rest: 0 1px 2px rgba(22, 28, 42, 0.05);
  --pm-shadow-hover: 0 6px 20px rgba(22, 28, 42, 0.1);
  --pm-shadow-pop: 0 16px 44px rgba(22, 28, 42, 0.16);
}

:root {
  /* ---- Type families ----------------------------------------------------
     Display serif = publisher credibility. Franklin = newspaper-heritage UI.
     Plex Mono = every figure, tabular. Inter is retired. */
  --pm-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --pm-font-sans:
    "Libre Franklin", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --pm-font-mono:
    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (px). Display sizes are Newsreader 500–600,
          headings Franklin 700, figures Plex Mono. -------------------------- */
  --pm-text-micro: 11px;
  --pm-text-caption: 12px;
  --pm-text-small: 13px;
  --pm-text-body: 14.5px;
  --pm-text-body-lg: 16.5px;
  --pm-text-h3: 19px; /* Franklin 700, -.01em */
  --pm-text-h2: 24px; /* Franklin 700, -.015em */
  --pm-text-h1: 31px; /* Newsreader 600, -.01em, lh 1.15 */
  --pm-text-display: 42px; /* Newsreader 500, -.015em, lh 1.1 */
  --pm-text-display-xl: 56px; /* Newsreader 500, -.02em, lh 1.06 */
  --pm-text-eyebrow: 11.5px; /* Franklin 600, uppercase, .14em, --pm-fg-2 */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --pm-space-1: 4px;
  --pm-space-2: 8px;
  --pm-space-3: 12px;
  --pm-space-4: 16px;
  --pm-space-5: 20px;
  --pm-space-6: 24px;
  --pm-space-8: 32px;
  --pm-space-10: 40px;
  --pm-space-12: 48px;
  --pm-space-16: 64px;
  --pm-space-24: 96px;

  /* ---- Radii (tighter, more editorial than v1) -------------------------- */
  --pm-radius-chip: 999px;
  --pm-radius-control: 6px; /* buttons, inputs */
  --pm-radius-card: 10px;
  --pm-radius-tile: 22%; /* logo tile */

  /* ---- Motion ------------------------------------------------------------
     Count-ups, 150ms hover, tab underline slide. No bounce, no parallax,
     no infinite loops. Honor prefers-reduced-motion. */
  --pm-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --pm-dur: 0.15s;
  --pm-dur-slow: 0.3s;

  /* ---- Layout ------------------------------------------------------------ */
  --pm-measure: 66ch; /* max prose width */
  --pm-content: 1080px; /* app column */
  --pm-content-wide: 1180px; /* marketing column */
}

/* ---- Figure defaults: apply to ANY numeric value ------------------------ */
.pm-num {
  font-family: var(--pm-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum" 1,
    "zero" 1;
  letter-spacing: -0.01em;
}
.pm-ticker {
  font-family: var(--pm-font-mono);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---- The ghost treatment: predicted anything --------------------------- */
.pm-ghost {
  border: 1px dashed var(--pm-predicted-border);
  background: var(--pm-predicted-soft);
  color: var(--pm-predicted-ink);
  border-radius: var(--pm-radius-control);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}