/* ============================================================
   DESIGN TOKENS — void / instrument-label style system
   "Observatory dome at midnight" — a single luminous artifact in
   void, chrome reduced to whisper-thin uppercase instrument labels.
   Layer 1 = base tokens.
   Layer 2 = compatibility aliases consumed by index.html markup.
   ============================================================ */

:root {
    /* ---------- LAYER 1 · BASE TOKENS ---------- */

    /* Colors */
    --color-void-black: #000000;
    --color-pure-white: #ffffff;
    --color-graphite-border: #4d4d4d;
    --color-steel-border: #808080;
    --color-fog-border: #999999;
    --color-ash-link: #c6c6c6;
    --color-midnight-violet: #343755;

    /* Typography — Font Families (nbarchitekt → Space Mono; Times = system serif) */
    --font-nbarchitekt: 'Space Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-times: 'Times', 'Times New Roman', Georgia, ui-serif, serif;
    --font-arial: 'Arial', Helvetica, ui-sans-serif, system-ui, sans-serif;
    /* display face — Space Grotesk is Space Mono's proportional sibling, so it
       reads as the same architectural voice for big headlines without adding a
       third personality to the system (mono = identity, grotesk = display). */
    --font-grotesk: 'Space Grotesk', 'Space Mono', ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Typography — Scale */
    --text-caption: 10px;
    --leading-caption: 1.2;
    --text-body: 14px;
    --leading-body: 1.5;
    --text-body-lg: 16px;
    --leading-body-lg: 1.88;

    /* Typography — Weights */
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    /* Spacing */
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-12: 12px;
    --spacing-13: 13px;
    --spacing-14: 14px;
    --spacing-16: 16px;
    --spacing-18: 18px;
    --spacing-28: 28px;

    /* Layout */
    --element-gap: 6px;

    /* Border Radius */
    --radius-md: 5px;
    --radius-xl: 12px;
    --radius-full: 500px;

    /* Named Radii */
    --radius-panels: 12px;
    --radius-buttons: 5px;
    --radius-pillbuttons: 500px;

    /* Surfaces — both levels are pure black, differentiated by 1px border only */
    --surface-void: #000000;
    --surface-instrument-panel: #000000;

    /* ---------- LAYER 2 · COMPATIBILITY ALIASES (existing markup keys) ----------
       The void system is achromatic: text = white, muted = ash, the single
       chromatic note is midnight violet used sparingly. Old accent slots all
       collapse toward white/ash so the page reads as one continuous dark stage. */

    /* surfaces & background — everything is the same void black */
    --bg: var(--color-void-black);
    --bg-2: var(--color-void-black);
    --card: var(--surface-instrument-panel);
    --card-2: var(--surface-instrument-panel);

    /* structural hairlines (differentiate by border, not fill) */
    --line: var(--color-graphite-border);          /* #4d4d4d */
    --line-strong: var(--color-steel-border);      /* #808080 */

    /* text */
    --ink: var(--color-pure-white);
    --muted: var(--color-ash-link);                /* #c6c6c6 */

    /* accents — no distinct CTA color; emphasis is white, the one tint is violet */
    --green: var(--color-pure-white);              /* primary emphasis → white */
    --cyan: var(--color-ash-link);                 /* secondary → ash */
    --violet: var(--color-midnight-violet);        /* the only chromatic accent */
    --amber: var(--color-ash-link);                /* warm accent → ash (chrome) */
    --coral: var(--color-ash-link);

    /* luminous accent — echoes the amber light of the 3D artifact (scene3d.js
       core/halo). Used SPARINGLY on key headline words + signature micro-copy so
       text gains warmth and ties to the centerpiece, while surfaces/borders stay
       achromatic per the void system. Not a CTA fill. */
    --accent: #ffae5c;                             /* artifact amber */
    --accent-hot: #ffd9a0;                         /* hot highlight */
    --accent-cool: #9aa0e0;                        /* readable lift of midnight violet for cool text accents */

    /* fonts — Space Mono carries identity (labels), Space Grotesk carries
       display headlines, Times carries body readability */
    --pixel: var(--font-nbarchitekt);              /* labels / micro-copy */
    --head: var(--font-grotesk);                   /* display headlines */
    --font-body: var(--font-times);
    --font-display: var(--font-grotesk);

    /* elevation is intentionally absent — no shadows, only borders */
    --shadow: none;
    --shadow-card: 0 0 0 1px var(--color-graphite-border);
    --shadow-deep: 0 0 0 1px var(--color-graphite-border);

    /* motion (unspecified by the system — neutral easing retained) */
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --duration-fast: 180ms;
    --duration-base: 300ms;
    --duration-slow: 600ms;
}