/* ============================================================================
   rglw — brand design tokens · BASE LAYER (defaults for every theme)
   ----------------------------------------------------------------------------
   This file carries the DEFAULT neutrals, semantic states, elevation shadow and
   light/dark discipline. It has no hues of its own (no --accent, no --ramp-*, no
   --grad-*, no --btn-*, no --glow). Pair it with exactly one theme overlay:

       <link rel="stylesheet" href="tokens.base.css">
       <link rel="stylesheet" href="themes/default.css">   <!-- or green / orange / … -->

   A theme overlay ALWAYS supplies the hues, and MAY also override the neutrals
   (--bg/-alt/-elev/-code, --border, --fg/-muted) and --shadow when a tone wants
   its own surfaces — e.g. `green` ships a matrix black, `orange` a warm paper.
   Tokens a theme doesn't override fall back to the values here. The cool neutrals
   below are tuned for the `default` (Cherenkov) tone, which inherits them as-is.

   USAGE: static sites can't @import across repos, so each project MIRRORS these
   two files into its own docs/ (base + chosen theme). When a token changes here,
   propagate it. Keep the hexes identical.
   ============================================================================ */
:root {
  color-scheme: light dark;

  /* neutrals — light */
  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --bg-elev: #ffffff;
  --bg-code: #f6f8fa;
  --border: #e3e6ea;
  --fg: #1c2024;
  --fg-muted: #5b6470;

  /* elevation — neutral drop shadow (hue-free, shared by all themes) */
  --shadow: 0 18px 50px -22px rgba(20, 30, 60, 0.35);

  /* semantic states — shared by all themes for cross-tool consistency */
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
}

:root[data-theme="dark"] {
  --bg: #0f1216;
  --bg-alt: #161a1f;
  --bg-elev: #181d23;
  --bg-code: #161a1f;
  --border: #262c33;
  --fg: #e6e9ec;
  --fg-muted: #9aa4b0;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216;
    --bg-alt: #161a1f;
    --bg-elev: #181d23;
    --bg-code: #161a1f;
    --border: #262c33;
    --fg: #e6e9ec;
    --fg-muted: #9aa4b0;
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  }
}

/* ============================================================================
   rglw — TONE: default (Cherenkov blue)
   ----------------------------------------------------------------------------
   The umbrella default. Cool electric-azure "confinement field" heating through
   violet to a magenta core. Inherits the base neutrals as-is (they were tuned
   for this tone), so it overrides only the hue tokens. Pair with tokens.base.css.

   Token NAMES are identical across every tone (so each is a drop-in); the colour
   ramp goes --ramp-1 (lightest/coolest) → --ramp-4 (deepest/hottest).
   ============================================================================ */
:root {
  /* restrained solid accents (links, focus, small icons) */
  --accent: #1668e6;
  --accent-fg: #ffffff;      /* text/icon on an --accent fill */
  --accent-2: #9747dd;

  /* signature gradient ramp — 4 ordered stops, lightest → deepest */
  --ramp-1: #2cc0f0;
  --ramp-2: #1668e6;
  --ramp-3: #9747dd;
  --ramp-4: #cf63a0;

  /* gradients — LARGE surfaces only. Fixed colours, NOT dark-swapped. */
  --grad-main: linear-gradient(100deg, #2cc0f0, #1668e6, #9747dd, #cf63a0);
  --grad-accent: linear-gradient(120deg, #1668e6, #9747dd);

  /* buttons — SOLID Cherenkov blue (clean edges; cyan-tinted "radiation" glow). */
  --btn-bg: #1668e6;
  --btn-bg-hover: #1259d2;
  --btn-bg-active: #0f4fbb;
  --btn-fg: #ffffff;
  --btn-shadow: 0 8px 22px -10px rgba(34, 150, 255, 0.6);
  --btn-shadow-hover: 0 12px 26px -10px rgba(34, 180, 255, 0.78);
  --btn-shadow-soft: 0 9px 24px -12px rgba(34, 160, 255, 0.45);

  /* glow */
  --glow: rgba(109, 59, 239, 0.20);
}

:root[data-theme="dark"] {
  --accent: #2079f0;         /* nudged just past AA contrast on dark */
  --accent-fg: #0b0e11;
  --accent-2: #ab93ff;
  --glow: rgba(171, 147, 255, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #2079f0;
    --accent-fg: #0b0e11;
    --accent-2: #ab93ff;
    --glow: rgba(171, 147, 255, 0.22);
  }
}