/*
 * @file site/tokens-m3.css (copied from Stream Hub public/tokens-m3.css, which the Hub still uses)
 * @description Material Design 3–inspired design tokens (dark). Stream Hub “Neon Spartan” maps to primary/secondary/tertiary.
 *   Load this first, then app / overlay styles. Legacy var names (--electric-cyan, etc.) remain for existing markup.
 */
:root {
    /* —— M3 semantic color roles (dark theme) —— */
    --md-sys-color-primary: #00f0ff;
    --md-sys-color-on-primary: #001415;
    --md-sys-color-primary-container: #1a3d42;
    --md-sys-color-on-primary-container: #a8f4ff;

    --md-sys-color-secondary: #ff00cc;
    --md-sys-color-on-secondary: #3b001f;
    --md-sys-color-secondary-container: #5c1d4a;
    --md-sys-color-on-secondary-container: #ffcce8;

    --md-sys-color-tertiary: #ccff00;
    --md-sys-color-on-tertiary: #1a2000;
    --md-sys-color-tertiary-container: #2a3300;
    --md-sys-color-on-tertiary-container: #e0ff9a;

    --md-sys-color-error: #ff0055;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #5c0018;
    --md-sys-color-on-error-container: #ffccd8;

    --md-sys-color-surface: #0c0e10;
    --md-sys-color-on-surface: #e8eaed;
    --md-sys-color-on-surface-variant: #aeb4bc;
    --md-sys-color-surface-dim: #0a0c0d;
    --md-sys-color-surface-bright: #1a1c20;
    --md-sys-color-surface-container-lowest: #0c0e10;
    --md-sys-color-surface-container-low: #14171a;
    --md-sys-color-surface-container: #1a1d21;
    --md-sys-color-surface-container-high: #22262b;
    --md-sys-color-surface-container-highest: #2d3238;
    --md-sys-color-outline: #5c6370;
    --md-sys-color-outline-variant: #3e454e;
    --md-sys-color-inverse-surface: #e8eaed;
    --md-sys-color-inverse-on-surface: #1a1c1e;
    --md-sys-color-inverse-primary: #006a75;

    /* Elevation (M3: tonal shadow layers) */
    --md-sys-elevation-0: none;
    --md-sys-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.32);

    /* Shape (4px grid) */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-full: 9999px;

    /* —— Legacy Stream Hub (unchanged names, values aligned to tokens) —— */
    --vinyl-black: #050505;
    --spartan-white: #ffffff;
    --glow-pink: var(--md-sys-color-secondary);
    --electric-cyan: var(--md-sys-color-primary);
    --star-green: #ccff00;
    --signal-red: var(--md-sys-color-error);
    --warning-yellow: #ffcc00;
    --accent-star: var(--star-green);
    --void-bg: var(--vinyl-black);
    --deimos-purple: var(--glow-pink);
    --toxic-green: var(--star-green);
    --holo-blue: var(--electric-cyan);

    /* Default panel chrome (overlays can stay semi-transparent) */
    --panel-bg: rgba(26, 29, 33, 0.9);
    --plastic-border: 1px solid var(--md-sys-color-outline-variant);
    --m3-surface-veil: rgba(26, 29, 33, 0.88);
}