/* ============================================================
   BREAKOUT KC - COLOR TOKENS  (2026 refresh)
   Disciplined palette: cinematic near-black ink, ONE crisp
   electric brand blue, ONE hot "flame" energy accent. The 2019
   scatter (competing red+orange+cyan+teal+mint) is consolidated.
   ============================================================ */
:root {
  /* --- Ink: cinematic near-black with a hint of blue --- */
  --ink-950: #070f16;   /* deepest - hero / footer / nav chrome */
  --ink-900: #0b1620;   /* dark sections, headline ink */
  --ink-800: #122230;   /* dark panels */
  --ink-700: #1b3340;   /* muted dark surfaces */
  --ink-600: #294352;   /* dark borders / steel */

  /* --- Brand primary: crisp electric blue (cleaner, brighter
         evolution of the 2017 #3da6c6) --- */
  --blue-700: #0f7c98;  /* pressed */
  --blue-600: #1494b4;  /* hover */
  --blue-500: #18aed1;  /* PRIMARY - buttons, links, accents */
  --blue-400: #4ac6e4;  /* bright */
  --blue-200: #aae4f1;  /* tint */
  --blue-50:  #e7f7fb;  /* faint wash */

  /* --- Energy accent: a single hot flame (replaces red+orange) --- */
  --flame-600: #e8401d;
  --flame-500: #ff5436;  /* alerts, NEW, Live Actor, high-urgency CTA */
  --flame-300: #ff8a73;

  /* --- Supporting (used only for the difficulty scale) --- */
  --mint-500: #14cf9a;   /* beginner / fresh */
  --amber-500: #ffb02e;  /* advanced */

  /* --- Neutrals (clean, faintly cool) --- */
  --white: #ffffff;
  --paper: #f4f6f7;      /* off-white page wash */
  --mist: #e9edef;       /* faint section fill */
  --line: #dde3e6;       /* hairline borders - a 2026 signature */
  --gray-300: #c4cccf;
  --gray-400: #97a2a8;
  --slate-500: #586771;  /* muted body / overlay labels */
  --ink-body: #13232e;   /* body text on light */
  --black: #000000;

  /* ===== SEMANTIC ALIASES ===== */
  --brand-primary: var(--blue-500);
  --brand-primary-hover: var(--blue-600);
  --brand-primary-active: var(--blue-700);
  --brand-ink: var(--ink-900);

  --bg-page: var(--white);
  --bg-wash: var(--paper);
  --bg-dark: var(--ink-900);
  --bg-darker: var(--ink-950);
  --bg-footer: var(--ink-950);
  --bg-chrome: var(--ink-950);      /* top nav bar - near-black, not pure black */
  --bg-band: var(--blue-500);       /* promo / divider bands */

  --surface-card: var(--white);
  --surface-overlay: rgba(7, 15, 22, 0.6);

  --text-heading: var(--ink-900);
  --text-body: var(--ink-body);
  --text-muted: var(--slate-500);
  --text-inverse: var(--white);
  --text-on-photo: var(--white);
  --text-link: var(--blue-600);

  --border-subtle: var(--line);
  --border-strong: var(--gray-300);
  --divider-on-dark: rgba(255, 255, 255, 0.12);

  --accent-energy: var(--flame-500);
  --accent-alert: var(--flame-500);
  --accent-fresh: var(--mint-500);

  /* difficulty scale - harmonized */
  --diff-beginner: var(--mint-500);
  --diff-intermediate: var(--blue-500);
  --diff-advanced: var(--amber-500);
  --diff-expert: var(--flame-500);

  /* focus ring */
  --focus-ring: rgba(24, 174, 209, 0.5);
}