/* viewer/themes/base.css — THE THEME TOKEN CONTRACT.
 *
 * This file defines EVERY custom property a theme may set, with the default
 * "glass" (frosted-glass ops console) values. style.css contains STRUCTURE
 * ONLY and consumes these tokens — it never hardcodes a color, font, radius,
 * or texture.
 *
 * A theme is one CSS file at viewer/themes/<id>.css, loaded via
 * <link id="theme-css"> AFTER base.css and style.css. It overrides any subset
 * of these tokens (scope them to :root or, safer, :root[data-theme="<id>"])
 * and may additionally restyle structure via body[data-theme="<id>"] …
 * selectors. See themes/CONTRACT.md for the stable DOM/class interface.
 *
 * The "glass" theme is exactly this file — themes/glass.css does not exist;
 * picking glass simply unloads the override stylesheet.
 */

:root {
  /* ── surfaces ─────────────────────────────────────────────────────────── */
  --bg: #0A0B0E;                                    /* page base color        */
  --bg-image: radial-gradient(1200px 800px at 70% -10%, #14161C 0%, #0A0B0E 55%);
  --panel: rgba(17, 19, 24, .66);                   /* main panel surface     */
  --panel-2: rgba(255, 255, 255, .03);              /* nested card / control  */
  --panel-sheen: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%);
  --panel-blur: blur(22px) saturate(1.4);           /* backdrop-filter value  */
  --hairline: rgba(255, 255, 255, .07);             /* default border         */
  --hairline-strong: rgba(255, 255, 255, .22);      /* emphasized border      */
  --shadow: 0 12px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  --hover: rgba(255, 255, 255, .06);                /* control hover wash     */

  /* ── ink (text) ───────────────────────────────────────────────────────── */
  --ink: #E8EAF0;                                   /* primary text           */
  --ink-dim: #9BA1AE;                               /* secondary text         */
  --ink-faint: #5E6470;                             /* caps labels / mutes    */

  /* ── brand + status colors ────────────────────────────────────────────── */
  --accent: #FFB35C;                                /* theme brand color      */
  --accent-rgb: 255, 179, 92;                       /* SAME color as r,g,b    */
  --accent-ink: #171009;                            /* text on solid accent   */
  --ok: #58D68A;                                    /* live feed / captured   */
  --warn: #FFB35C;                                  /* reconnecting / burns   */
  --danger: #FF5040;                                /* abort / drone beacon   */
  --info: #6EA8FF;                                  /* informational          */
  --scan: #30E0FF;                                  /* INSPECT tone (matches
                                                       the cyan orbit trail)  */
  --glow: 10px;                                     /* status-dot glow radius */

  /* ── typography ───────────────────────────────────────────────────────── */
  /* Loaded by index.html and guaranteed available to every theme:
     'Inter', 'Inter Tight', 'Space Grotesk', 'JetBrains Mono', 'IBM Plex Mono' */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter Tight', 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking-caps: .08em;                           /* caps-label letterspace */

  /* ── geometry / texture ───────────────────────────────────────────────── */
  --radius: 16px;                                   /* panel corner radius    */
  --radius-ctl: 10px;                               /* buttons / small cards  */
  --radius-pill: 999px;                             /* chips / pills          */
  --stripe: repeating-linear-gradient(              /* mission progress fill  */
      -45deg,
      rgba(var(--accent-rgb), .85) 0 6px,
      rgba(var(--accent-rgb), .28) 6px 12px);
  --scanlines: none;                                /* full-screen overlay
                                                       (e.g. CRT scanlines) —
                                                       painted by #console::before */
  --ease: cubic-bezier(.2, .8, .2, 1);              /* shared motion curve    */
}