/* ══════════════════════════════════════════════════════════════
   FlexRank Design Token Overrides
   Extends fyf_theme tokens with FlexRank brand + missing tokens.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ══ RGB channel mirrors (light) ══════════════════════════════
     Parallel "<r> <g> <b>" triplets for every solid color the
     Tailwind config exposes, consumed as rgb(var(--x-rgb) / <alpha-value>).
     These exist ONLY so Tailwind opacity modifiers (bg-accent/15,
     ring-accent/50, text-text-dim/50, …) generate real CSS — bare
     var(--x) colors can't be alpha-composited by Tailwind.
     The original hex/rgba vars below are left untouched so hand-written
     CSS and the fyf_theme gem (which we don't edit) keep working.
     Keep values in sync with the hex source of truth in this file and
     fyf_theme/tokens.css. Translucent "-bg"/"-tint" vars are intentionally
     NOT mirrored — they're pre-blended fills used without opacity. ──── */
  --accent-rgb: 230 74 144;
  --accent-hover-rgb: 240 106 170;
  --accent-btn-hover-rgb: 212 63 130;
  --bg-rgb: 236 229 219;
  --surface-rgb: 246 241 234;
  --surface-2-rgb: 237 223 210;
  --surface-3-rgb: 229 215 202;
  --border-rgb: 228 217 204;
  --border-hover-rgb: 197 184 171;
  --border-subtle-rgb: 237 228 218;
  --border-muted-rgb: 224 212 199;
  --text-rgb: 59 47 53;
  --text-muted-rgb: 136 122 114;
  --text-dim-rgb: 176 165 156;
  --green-rgb: 42 125 62;
  --blue-rgb: 97 153 200;
  --orange-rgb: 232 114 74;
  --red-rgb: 212 64 48;
  --purple-rgb: 156 96 224;
  --yellow-rgb: 226 180 30;
  --pink-rgb: 230 74 144;
  --pos-qb-rgb: 232 114 74;
  --pos-rb-rgb: 42 125 62;
  --pos-wr-rgb: 97 153 200;
  --pos-te-rgb: 226 180 30;
  --pos-k-rgb: 156 96 224;

  /* ── FlexRank accent (FYF pink) ────────────────────────────── */
  --accent: #e64a90;
  --accent-hover: #f06aaa;
  --accent-btn-hover: #d43f82;
  --accent-bg: rgba(230, 74, 144, 0.08);

  /* ── Light-mode surface warmth (overrides gem near-white) ──── */
  --bg: #ece5db;
  --surface: #f6f1ea;
  --surface-2: #eddfd2;

  /* ── Additional text ───────────────────────────────────────── */
  --text-dim: #b0a59c;

  /* ── Additional surfaces ───────────────────────────────────── */
  --surface-3: #e5d7ca;
  --border-hover: #c5b8ab;

  /* ── Panel border variants (opaque, for drawer/panel UIs) ── */
  --border-subtle: #ede4da;
  --border-muted: #e0d4c7;

  /* ── Missing brand-color backgrounds ───────────────────────── */
  --purple-bg: rgba(156, 96, 224, 0.1);
  --pink-bg: rgba(230, 74, 144, 0.08);

  /* ── Position badge colors (optimized for legibility) ──────── */
  --pos-qb:     var(--orange);
  --pos-qb-bg:  var(--orange-bg);
  --pos-rb:     var(--green);
  --pos-rb-bg:  var(--green-bg);
  --pos-wr:     var(--blue);
  --pos-wr-bg:  var(--blue-bg);
  --pos-te:     var(--yellow);
  --pos-te-bg:  var(--yellow-bg);
  --pos-k:      var(--purple);
  --pos-k-bg:   var(--purple-bg);

  /* ── Position row tints (subtle version of badge colors) ──── */
  --pos-qb-tint: rgba(249, 115, 22, 0.06);
  --pos-rb-tint: rgba(42, 125, 62, 0.06);
  --pos-wr-tint: rgba(97, 153, 200, 0.06);
  --pos-te-tint: rgba(250, 204, 21, 0.06);
  --pos-k-tint: rgba(156, 96, 224, 0.06);
  --pos-def-tint: rgba(136, 122, 114, 0.04);

  /* ── Dashboard typefaces ───────────────────────────────────────
     --font-dash: geometric sans for data-table chrome / headers
     --font-data: monospace with uniform tabular figures for the
     numbers themselves. Loaded via Google Fonts in the app layout. ── */
  --font-dash: "Space Grotesk", var(--font), system-ui, sans-serif;
  --font-data: "JetBrains Mono", var(--mono), ui-monospace, monospace;

  /* ── Comparison medal TEXT (theme-aware; darker than the gold/bronze ring
     colors so text stays legible on the light surface) ─────────────────── */
  --cmp-gold-text: #8a6d15;
  --cmp-bronze-text: #7a4a20;

  /* ── Comparison week strip — weekly positional-tier fills ──────────────
     A traffic-light palette, NOT the single-hue ramp the dot-plot uses.
     Lightness is staggered deliberately: green and red at equal lightness is
     the textbook CVD collision (the reference status palette measures dE 4.1
     deutan), and the stagger lifts deutan separation to 12.7. Same tier
     vocabulary as Editor::StatRankable::RANK_TIER_COLORS, collapsed from five
     bands to three because these are unlabelled 11px fills.
     Light values are INTERIM — see the design spec; app-wide light mode is
     getting its own pass. ─────────────────────────────────────────────────── */
  --wk-t1: #14562c;
  --wk-t2: #b8892c;
  --wk-t3: #e2a89f;
}

html[data-theme="dark"] {
  /* ══ RGB channel mirrors (dark) — see :root note above ════════ */
  --accent-rgb: 244 114 182;
  --accent-hover-rgb: 249 168 212;
  --accent-btn-hover-rgb: 226 99 159;
  --bg-rgb: 14 12 19;
  --surface-rgb: 22 19 29;
  --surface-2-rgb: 31 26 40;
  --surface-3-rgb: 42 36 54;
  --border-rgb: 44 39 56;
  --border-hover-rgb: 64 57 82;
  --border-subtle-rgb: 36 31 46;
  --border-muted-rgb: 50 44 64;
  --text-rgb: 237 228 218;
  --text-muted-rgb: 162 148 142;
  --text-dim-rgb: 124 112 118;
  --green-rgb: 43 163 69;
  --blue-rgb: 106 173 222;
  --orange-rgb: 255 133 96;
  --red-rgb: 239 83 80;
  --purple-rgb: 192 132 252;
  --yellow-rgb: 253 216 53;
  --pink-rgb: 244 114 182;
  --pos-qb-rgb: 251 146 60;
  --pos-rb-rgb: 74 222 128;
  --pos-wr-rgb: 106 173 222;
  --pos-te-rgb: 250 204 21;
  --pos-k-rgb: 192 132 252;

  --accent: #f472b6;
  --accent-hover: #f9a8d4;
  --accent-btn-hover: #e2639f;
  --accent-bg: rgba(244, 114, 182, 0.14);

  /* ── Near-black surface deepening ──────────────────────────────
     Overrides the gem's dark hex so hand-written CSS (var(--surface))
     stays in sync with the -rgb mirrors above (Tailwind opacity utils).
     Matches the slim near-black editor mockup. ── */
  --bg: #0e0c13;
  --surface: #16131d;
  --surface-2: #1f1a28;
  --surface-3: #2a2436;

  --text: #ede4da;
  --text-muted: #a2948e;
  --text-dim: #7c7076;

  --border: #2c2738;
  --border-hover: #403952;

  /* ── Panel border variants (opaque, for drawer/panel UIs) ── */
  --border-subtle: #241f2e;
  --border-muted: #322c40;

  --purple-bg: rgba(192, 132, 252, 0.15);
  --pink-bg: rgba(244, 114, 182, 0.12);

  /* ── Position badge colors — brighter for dark surface contrast ─
     Brand --green (#2ba345) and --red (#ef5350) fall below WCAG AA
     at 10px on dark surfaces. These overrides hit ≥4.5:1 contrast. */
  --pos-qb:     #fb923c;
  --pos-qb-bg:  rgba(251, 146, 60, 0.15);
  --pos-rb:     #4ade80;
  --pos-rb-bg:  rgba(74, 222, 128, 0.15);
  --pos-wr:     #6aadde;
  --pos-wr-bg:  rgba(106, 173, 222, 0.15);
  --pos-te:     #facc15;
  --pos-te-bg:  rgba(250, 204, 21, 0.15);
  --pos-k:      #c084fc;
  --pos-k-bg:   rgba(192, 132, 252, 0.15);

  /* ── Position row tints (subtle version of badge colors) ────── */
  --pos-qb-tint: rgba(251, 146, 60, 0.07);
  --pos-rb-tint: rgba(74, 222, 128, 0.07);
  --pos-wr-tint: rgba(106, 173, 222, 0.07);
  --pos-te-tint: rgba(250, 204, 21, 0.07);
  --pos-k-tint: rgba(192, 132, 252, 0.07);
  --pos-def-tint: rgba(160, 144, 136, 0.04);

  /* ── Comparison medal TEXT (theme-aware) — dark surface reads the original
     light gold/bronze fine, so these match the mark's ring colors ──────── */
  --cmp-gold-text: #f0d98a;
  --cmp-bronze-text: #e0a877;

  /* Dark: CVD 12.7 deutan, normal-vision 19.6, all three >=3:1 on --surface-2.
     Validated with the dataviz skill's validate_palette.js --pairs all. */
  --wk-t1: #6ee89b;
  --wk-t2: #c9a03c;
  --wk-t3: #b44a52;
}

/* ── Theme toggle override (gem defaults to cream-on-dark) ──── */
.theme-toggle {
  background: var(--surface-3);
  color: var(--text-muted);
}
.theme-toggle:hover {
  background: var(--border-hover);
  color: var(--text);
}
html[data-theme="dark"] .theme-toggle {
  background: rgba(250, 220, 194, 0.1);
  color: rgba(250, 220, 194, 0.7);
}
html[data-theme="dark"] .theme-toggle:hover {
  background: rgba(250, 220, 194, 0.2);
  color: #fadcc2;
}

/* ── Avatar override (fyf_brand gem defaults to --orange) ───── */
.profile-avatar { background: var(--accent); }

/* ── Auth hint text ──────────────────────────────────────────── */
.auth-field .hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ── Toast extensions ─────────────────────────────────────────
   The gem styles `.toast` / `.toast-icon` / `.toast-success` /
   `.toast-error`. These add the parts lib/notify.js renders on top:
   a flexible message column, an optional inline action, and the close
   button persistent (error) toasts get. Long failure copy needs a width
   cap and wrapping — the gem's toast is sized for one-line flashes. ── */
.toast {
  max-width: min(420px, calc(100vw - 48px));
  align-items: flex-start;
}
.toast-icon { flex: none; margin-top: 1px; }
.toast-message {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.toast-action {
  flex: none;
  align-self: center;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.toast-action:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--accent);
}
.toast-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 28px keeps the dismiss target above the WCAG 2.5.8 24px floor even though
     the glyph inside is 14px. */
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.toast-close:hover {
  background: var(--surface-2);
  color: var(--text);
}