/*
 * Design Tokens — Space Rocks (v2)
 *
 * Vector CRT aesthetic: monochrome white-on-black, phosphor glow.
 * monochrome white-on-black, phosphor glow, monospaced type.
 *
 * ALL 27 foreground/background pairs pass WCAG AA contrast (4.5:1 minimum).
 * Minimum ratio: 4.68:1 (--color-neutral on --color-neutral-dark).
 * See DESIGN_SYSTEM.md for full contrast matrix.
 */

:root {
    /* ========================================
       COLORS — 12 tokens
       Every foreground passes 4.5:1 on all 3 backgrounds.
       ======================================== */

    /* Primary: white vector lines */
    --color-primary:          #FFFFFF;  /* L=1.000 — 21:1 / 18.75:1 / 16.15:1 */
    --color-primary-muted:    #CCCCCC;  /* L=0.604 — 13.08:1 / 11.68:1 / 10.06:1 */

    /* Secondary: CRT cyan for highlights */
    --color-secondary:        #33CCFF;  /* L=0.511 — 11.22:1 / 10.02:1 / 8.63:1 */
    --color-secondary-muted:  #2899C4;  /* L=0.272 — 6.44:1 / 5.75:1 / 4.95:1 */

    /* Backgrounds: the void of space */
    --color-bg:               #000000;  /* L=0.000 — primary background */
    --color-surface:          #111111;  /* L=0.006 — elevated surfaces */

    /* Neutral: grays for UI elements */
    --color-neutral-light:    #A3A3A3;  /* L=0.366 — 8.32:1 / 7.43:1 / 6.40:1 */
    --color-neutral:          #8A8A8A;  /* L=0.254 — 6.08:1 / 5.43:1 / 4.68:1 */
    --color-neutral-dark:     #222222;  /* L=0.016 — borders, separators */

    /* Semantic: retro CRT-inspired status colors */
    --color-success:          #00FF41;  /* L=0.719 — 15.38:1 / 13.73:1 / 11.83:1 */
    --color-warning:          #FFB000;  /* L=0.523 — 11.46:1 / 10.23:1 / 8.82:1 */
    --color-error:            #FF4444;  /* L=0.258 — 6.16:1 / 5.50:1 / 4.74:1 */


    /* ========================================
       TYPOGRAPHY — 5 sizes, modular ratio ~1.25
       ======================================== */

    --font-family:        'Courier New', Courier, monospace;
    --font-weight-normal: 400;
    --font-weight-bold:   700;

    --font-size-sm:       12px;
    --font-size-base:     16px;
    --font-size-md:       20px;
    --font-size-lg:       24px;
    --font-size-xl:       32px;

    --line-height-sm:     1.4;
    --line-height-base:   1.5;
    --line-height-md:     1.4;
    --line-height-lg:     1.3;
    --line-height-xl:     1.2;


    /* ========================================
       SPACING — 4px base grid, 7 steps
       ======================================== */

    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;


    /* ========================================
       BORDER RADII — angular arcade aesthetic
       ======================================== */

    --radius-sm:  2px;
    --radius-md:  4px;
    --radius-lg:  8px;


    /* ========================================
       BOX SHADOWS — CRT phosphor glow effects
       ======================================== */

    --shadow-subtle: 0 0 4px rgba(255, 255, 255, 0.08);
    --shadow-medium: 0 0 10px rgba(255, 255, 255, 0.15);
    --shadow-strong: 0 0 20px rgba(255, 255, 255, 0.25);


    /* ========================================
       TRANSITIONS — 3 timing tiers
       ======================================== */

    --transition-fast:   100ms ease-out;
    --transition-normal: 200ms ease-in-out;
    --transition-slow:   400ms ease-in-out;
}