/* ══════════════════════════════════════════════════════════════
   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);
}

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: 26 21 32;
  --surface-rgb: 38 32 48;
  --surface-2-rgb: 52 42 58;
  --surface-3-rgb: 64 53 74;
  --border-rgb: 68 58 80;
  --border-hover-rgb: 92 79 104;
  --border-subtle-rgb: 61 51 71;
  --border-muted-rgb: 74 63 85;
  --text-rgb: 237 228 218;
  --text-muted-rgb: 160 144 136;
  --text-dim-rgb: 112 100 102;
  --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.12);

  --text-dim: #706466;

  --surface-3: #40354a;
  --border-hover: #5c4f68;

  /* ── Panel border variants (opaque, for drawer/panel UIs) ── */
  --border-subtle: #3d3347;
  --border-muted: #4a3f55;

  --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);
}

/* ── 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;
}