/* ══════════════════════════════════════════════════════════
   Aim Games Analytics — Shared Theme Variables
   ══════════════════════════════════════════════════════════ */

/* ── Theme: Light (default) ── */
:root {
  /* Tells the browser which way to render NATIVE controls: the date picker's
     calendar glyph, select arrows, checkboxes and scrollbars. Without it those
     stay light-themed on a dark page — the calendar icons in Upcoming Ads were
     a black glyph on a dark input, effectively invisible. */
  color-scheme: light;

  /* Sidebar */
  --sidebar: #16181e;
  --sidebar-text: #c4c4d4;
  --sidebar-bright: #fff;
  /* The sidebar is dark in BOTH themes, so these are measured against #16181e,
     not the page. --sidebar-dim was 2.7:1 — the "ANALYTICS" style section
     labels and the wordmark were barely there. */
  --sidebar-dim: #8686a8;
  --sidebar-item: #9a9ab4;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-hover: rgba(255,255,255,0.05);
  --sidebar-active-bg: rgba(243,198,69,0.1);
  --sidebar-active-label: #8a8aaa;

  /* Surfaces. Nothing here is pure white: a full-page #fff is the main source of
     eye strain in a tool people sit in all day. Cards are a lifted off-white and
     the page sits a step below them, so the card edge reads from the fill rather
     than relying on the border alone. Everything got darker, so text contrast
     only improved. */
  --bg: #ebecf0;
  --bg-card: #fafafc;
  --bg-highlight: #fdf8eb;
  /* Alternating table rows — one step off --bg-card, enough to track a row
     across a wide table without striping that reads as a selection. */
  --row-stripe: #f1f2f6;

  /* Letterbox behind video, image and canvas previews. Deliberately the same in
     both themes — media sits on black regardless of the UI. Replaces 17 separate
     literals (#000, #1a1a2e, #0b0b0f) that had drifted apart across pages. */
  --media-bg: #0b0b0f;

  /* Quiet text placed ON a media surface. --text-dim is tuned against the themed
     page background, so in light mode it fell to 3.27:1 on the always-black
     stage. Same in both themes, for the same reason --media-bg is. */
  --on-media-dim: #9aa3b2;

  /* Text — all three quiet tiers measured >= 4.5:1 against --bg, --bg-card and
     --bg-highlight. They used to run 3.8:1 (muted), 3.3:1 (note) and 2.4:1
     (dim), so every caption, count and hint on a light page was below the
     readability floor. Most of the marketing team works in light mode, so the
     contrast floor wins over the style guide's lighter greys where they
     conflict — see context/frontend_style_guide.md.

     AA on white leaves little room between the tiers: the spread is 15.7 / 5.9 /
     5.7 / 4.7 rather than the wide ramp the old values implied. Reach for weight
     or size when you need a bigger step down than that. */
  --text: #1a1a2e;
  --text-bright: #1a1a2e;
  --text-muted: #5c5c76;
  --text-dim: #61617a;
  --text-note: #63637f;

  /* Borders — a touch stronger than before so a card edge still reads now that
     the page behind it is closer in value. */
  --border: #dcdce6;
  --border-hover: #b4b4c8;
  --gridline: #d8dce8;

  /* Accent */
  --accent: #d4a017;
  --accent-hover: #b8860b;
  --accent-bg: rgba(212,160,23,0.08);
  --on-accent: #1a1a2e;
  /* Accent as TEXT on a light surface. --accent is a mid gold: it measures
     2.4:1 on a white card and 2.2:1 on --accent-bg, well under the 4.5:1 floor,
     so gold labels were effectively unreadable in light mode. This is the same
     hue, darkened. Use it for text and icons; --accent stays the value for
     fills, borders and focus rings, where luminance isn't the constraint.
     Tuned against the WORST backdrop it lands on, not the best: an --accent-bg
     tint over --bg (not --bg-card), which is where the admin owner badge sits.
     It measured 4.05:1 there at the previous #8f6810; this is 4.6:1. */
  --accent-text: #855f0c;

  /* Semantic. Each has a -text counterpart for the same reason --accent does: the
     base value is tuned as a FILL, with white sitting on it, and every one of the
     three measured 2.1-3.8:1 when used as a LABEL on its own 8% tint. Use the
     base for fills, dots and borders; -text wherever it's type. */
  --green: #22c55e;
  --green-bg: rgba(34,197,94,0.08);
  --green-text: #166534;
  --warn: #d97706;
  --warn-bg: rgba(217,119,6,0.08);
  --warn-text: #92400e;
  --error: #e8134f;
  --error-bg: rgba(232,19,79,0.08);
  --error-text: #be123c;

  /* Tables */
  --table-stripe: #fafafc;
  --table-hover: #fdf8eb;

  /* Shadows */
  --shadow: rgba(0,0,0,0.04);
  --shadow-hover: rgba(0,0,0,0.08);

  /* Chart */
  --chart-border: #fff;

  /* Buttons */
  /* White-on-#3b82f6 measured 3.68:1 — under the floor on every primary button
     in the app, in both themes. blue-600 instead of blue-500 puts it at 5.1:1,
     and it also lifts the blue-text-on-cream cases (.stage-ready, .dstat-review,
     .status-rendering, .role-admin) from 3.4:1 to 4.8:1. */
  --btn-primary: #2563eb;
  --btn-primary-hover: #1d4ed8;
  --btn-on-primary: #fff;
  /* Blue as TEXT, the counterpart to --accent-text. --btn-primary is tuned to
     carry white on top of it, which pulls it dark — the opposite of what a label
     on a tinted chip needs in dark mode. Keep them separate: --btn-primary for
     fills, --btn-primary-text for "rendering" / "ready" / "review" labels. */
  --btn-primary-text: #1d4ed8;
  /* The tinted FILL that goes under --btn-primary-text. Its absence is why the
     four chips above used --accent-bg — a GOLD tint — under a blue label, and
     read as two-tone. Same 8% tint as --green-bg / --error-bg. */
  --btn-primary-bg: rgba(37,99,235,0.08);
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--text-muted);
  --btn-secondary-border: var(--border);
  --btn-secondary-hover-border: #3b82f6;
  --btn-secondary-hover-text: var(--text);
  --btn-secondary-fill: #e2e4e9;
  --btn-secondary-fill-border: #cccdd4;
  --btn-secondary-fill-hover: #d0d2d9;

  /* Tags */
  --tag-bg: #eef0ff;
  --tag-text: #3b4fc4;
  --tag-border: #c8cef0;

  /* Code editor syntax (CodeMirror tokens) — GitHub Light palette */
  --cm-tag: #116329;
  --cm-attr: #0550ae;
  --cm-string: #0a3069;
  --cm-comment: #6e7781;
  --cm-keyword: #cf222e;
  --cm-number: #953800;
}

/* ── Theme: Dark ── */
[data-theme="dark"] {
  color-scheme: dark;

  /* Sidebar */
  --sidebar: #0a0e14;
  --sidebar-text: #94a3b8;
  --sidebar-bright: #e2e8f0;
  --sidebar-dim: #8686a8;   /* was 2.6:1 on the sidebar fill */
  --sidebar-item: #8b98ad;  /* was 3.4:1 — this is every nav label */
  --sidebar-border: rgba(255,255,255,0.08);
  --sidebar-hover: rgba(255,255,255,0.08);
  --sidebar-active-bg: rgba(243,198,69,0.12);
  --sidebar-active-label: #94a3b8;

  /* Surfaces */
  --bg: #0f172a;
  --bg-card: #1e293b;
  --bg-highlight: #1a2f4a;
  /* Subtler than light mode's — the dark card fill already separates rows. */
  --row-stripe: #223046;

  /* Text */
  --text: #e2e8f0;
  --text-bright: #f8fafc;
  /* Dark had the same problem one tier down: --text-dim was 3.8:1 and
     --text-note 2.3:1 against --bg. Raised to clear 4.5:1 on --bg and
     --bg-card. */
  --text-muted: #94a3b8;
  --text-dim: #8b98ad;
  --text-note: #7d8ca3;

  /* Borders */
  --border: #334155;
  --border-hover: #475569;
  --gridline: #1e3a5f;

  /* Accent */
  --accent: #f3c645;
  --accent-hover: #daa520;
  --accent-bg: rgba(243,198,69,0.1);
  --on-accent: #1a1a2e;
  /* Dark mode needs no darkening — --accent already measures 7.2:1 here. */
  --accent-text: #f3c645;

  /* Semantic. Green and warn already read on a dark tint, so their -text values
     are the base; only error needed lifting (3.5:1 -> 5.2:1). */
  --green: #34d399;
  --green-bg: rgba(52,211,153,0.1);
  --green-text: #34d399;
  --warn: #f59e0b;
  --warn-bg: rgba(245,158,11,0.1);
  --warn-text: #f59e0b;
  --error: #f81351;
  --error-bg: rgba(248,19,81,0.1);
  --error-text: #fb7185;

  /* Code editor syntax (CodeMirror tokens) — GitHub Dark palette */
  --cm-tag: #7ee787;
  --cm-attr: #79c0ff;
  --cm-string: #a5d6ff;
  --cm-comment: #8b949e;
  --cm-keyword: #ff7b72;
  --cm-number: #ffa657;

  /* Tables */
  --table-stripe: #162032;
  --table-hover: #1a2d4a;

  /* Shadows */
  --shadow: rgba(0,0,0,0.2);
  --shadow-hover: rgba(0,0,0,0.3);

  /* Chart */
  --chart-border: #1e293b;

  /* Buttons */
  /* White-on-#3b82f6 measured 3.68:1 — under the floor on every primary button
     in the app, in both themes. blue-600 instead of blue-500 puts it at 5.1:1,
     and it also lifts the blue-text-on-cream cases (.stage-ready, .dstat-review,
     .status-rendering, .role-admin) from 3.4:1 to 4.8:1. */
  --btn-primary: #2563eb;
  --btn-primary-hover: #1d4ed8;
  --btn-on-primary: #fff;
  /* Light enough to read on a dark tinted chip — 6.5:1 on --accent-bg over a
     card, where --btn-primary itself measures 1.5:1. */
  --btn-primary-text: #93c5fd;
  /* Tinted from the light-blue TEXT hue, not from --btn-primary: #2563eb at 10%
     over #0f172a is indistinguishable from the card. Matches how --green-bg and
     --error-bg tint their dark-theme hue rather than the light one. */
  --btn-primary-bg: rgba(147,197,253,0.1);
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #94a3b8;
  --btn-secondary-border: #334155;
  --btn-secondary-hover-border: #3b82f6;
  --btn-secondary-hover-text: #e2e8f0;
  --btn-secondary-fill: #334155;
  --btn-secondary-fill-border: #475569;
  --btn-secondary-fill-hover: #3d4f6a;

  /* Tags */
  --tag-bg: rgba(243,198,69,0.12);
  --tag-text: #f3c645;
  --tag-border: rgba(243,198,69,0.25);
}