/* brand font, reset and base, the colour tokens and their dark-mode values. Part of the stylesheet split by page; public/css/README.md says why. */
/* ── MediaKind brand font (museo-sans via Adobe TypeKit) ──── */
@import url("https://use.typekit.net/jwa3aeq.css");

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #dde1e7;
  --border-strong: #b0b8c4;
  --text: #1a1d23;
  --text-muted: #6b7280;
  --accent: #004F89;        /* MediaKind deep blue — matches the logo wordmark */
  --brand-cyan: #009FE3;    /* logo secondary */
  --brand-crimson: #D4103A; /* logo asterisk */
  --accent-hover: #003a6e;
  --danger: #dc2626;
  --actual-bg: #f0f9ff;
  --forecast-bg: #fffbeb;
  --quarter-bg: #f0f9ff;
  --fy-bg: #fffbeb;
  --total-bg: #f1f5f9;
  --prior-bg: #f0f9ff;
  --growth-pos: #16a34a;
  --growth-warn: #ca8a04;
  --growth-neg: #dc2626;
  /* Sony Monitor: which host a run walked. Clear of pass/fail/warn and of
     the Ready-for-QA blue, so a tag never reads as a verdict. Dark enough
     for 11px text on the tag's own 14% tint: 5.6:1 and 6.1:1 on white. */
  --host-origin: #6d28d9;
  --host-cdn: #115e59;
  --highlight: #fef08a;
  --header-h: 56px;

  /* Everything below exists so dark mode has something to redefine. A colour
     written straight into a rule cannot follow the theme; add a token here
     (and its dark value in the block underneath) rather than a hex. */
  --accent-text: #004F89;   /* the accent as text/links; lighter in dark mode */
  --text-secondary: #334155;
  --text-faint: #94a3b8;
  --border-faint: #f1f5f9;
  --border-light: #e5e7eb;
  --hover-bg: #e8f4fb;
  --subtle-bg: #f8fafc;
  --selected-bg: #d5eaf6;
  --header-bg: #f0f4f8;
  --band-bg: #192639;       /* business-unit and grand-total rows (white text) */
  /* Behind a customer logo, in both themes on purpose: logos are uploaded as
     drawn for a white page, and dark ink on a transparent PNG disappears on a
     dark one. Not redefined in the dark block. */
  --logo-bg: #fff;
  /* The revenue table's trend sparklines (public/js/sparkline.js): forecast
     is always the fainter of the two. */
  --spark-actual: #2563eb;
  --spark-forecast: #93c5fd;
  --spark-empty: #cbd5e1;

  --red-bg: #fee2e2;    --red-bg-strong: #fecaca;   --red-border: #fca5a5;   --red-fg: #991b1b;
  --amber-bg: #fef3c7;  --amber-bg-strong: #fde68a; --amber-border: #fcd34d; --amber-fg: #92400e;
  --green-bg: #f0fdf4;  --green-bg-strong: #dcfce7; --green-fg: #166534;
  --orange-bg: #ffedd5; --orange-fg: #c2410c;
  --blue-bg: #e0f0ff;   --blue-border: #bae6fd;     --blue-fg: #0063b2;
  --purple-bg: #efe7fd; --purple-fg: #6a2ec7;
  --cyan-bg: #cffafe;   --cyan-fg: #0e7490;
  --indigo-bg: #eef2ff;
  --pink-bg: #fdf2f8;

  /* An at-risk customer's row, deepening across prior / quarter / FY columns. */
  --risk-bg: #fff5f5;
  --risk-prior: #faeae6;
  --risk-prior-q: #f5e0dc;
  --risk-prior-fy: #f0d4ce;
  --risk-q: #fde8e8;
  --risk-fy: #fbdada;

  color-scheme: light;
}

/* ── Dark mode ────────────────────────────────────────────────
   public/js/theme.js sets data-theme on <html> from the user's choice (System /
   Light / Dark, in the user menu), resolving System through
   prefers-color-scheme — so this one selector covers both routes. Only tokens
   change here; the rules above read them. */
:root[data-theme="dark"] {
  --bg: #0f141a;
  --surface: #171d25;
  --border: #2c3542;
  --border-strong: #465264;
  --text: #e3e8ef;
  --text-muted: #939eac;
  --accent: #1f6fb0;        /* still carries white text: buttons, active tabs */
  --accent-hover: #2b82c8;
  --danger: #f87171;
  --actual-bg: #13263a;
  --forecast-bg: #2a2412;
  --quarter-bg: #13263a;
  --fy-bg: #2a2412;
  --total-bg: #1d2530;
  --prior-bg: #13263a;
  --growth-pos: #4ade80;
  --growth-warn: #facc15;
  --growth-neg: #f87171;
  --host-origin: #c4b5fd;
  --host-cdn: #5eead4;
  --highlight: #574a10;

  --accent-text: #6cb4f0;
  --text-secondary: #c3cbd6;
  --text-faint: #6b7686;
  --border-faint: #222a35;
  --border-light: #262f3b;
  --hover-bg: #1b2b3c;
  --subtle-bg: #1b222c;
  --selected-bg: #1d3a56;
  --header-bg: #1b222c;
  --band-bg: #0a2238;
  --spark-actual: #60a5fa;
  --spark-forecast: #2f5f99;
  --spark-empty: #465264;

  --red-bg: #3a1a1d;    --red-bg-strong: #4d2025;   --red-border: #7a2e33;   --red-fg: #fca5a5;
  --amber-bg: #33290f;  --amber-bg-strong: #463812; --amber-border: #7a5f1a; --amber-fg: #f5c451;
  --green-bg: #14291d;  --green-bg-strong: #173522; --green-fg: #86efac;
  --orange-bg: #3a2412; --orange-fg: #fdba74;
  --blue-bg: #14304b;   --blue-border: #22557f;     --blue-fg: #93c5fd;
  --purple-bg: #2b2146; --purple-fg: #c4b5fd;
  --cyan-bg: #0f3038;   --cyan-fg: #67e8f9;
  --indigo-bg: #1e2244;
  --pink-bg: #351a2b;

  --risk-bg: #2a181b;
  --risk-prior: #2f1a1c;
  --risk-prior-q: #341c1e;
  --risk-prior-fy: #3a1f21;
  --risk-q: #321b1e;
  --risk-fy: #3b1d21;

  color-scheme: dark;
}
/* Shadows tuned for a white page read as nothing on a dark one; the modal
   backdrop needs more weight to separate the dialog from the page. */
:root[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .6); }

/* The brand logo: the deep-blue wordmark on light, the reversed one on dark. */
.logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }

body {
  font-family: museo-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.hidden { display: none !important; }