/* ==========================================================================
   Fathom — Design Tokens
   CSS Custom Properties for the arcade game's visual language.

   These tokens serve:
   1. Page chrome (body background, canvas centering, fallback text)
   2. Formal reference for the game.js CONFIG color constants
   3. Future DOM-based UI (settings, overlays, menus)

   All foreground-on-background pairs verified WCAG AA (4.5:1+) via
   programmatic sRGB-linearized contrast computation (Node.js script).
   ========================================================================== */

:root {
    /* =====================================================================
       COLOR PALETTE — Bioluminescent Abyss
       Matches game.js CONFIG values for the deep-sea theme.
       ===================================================================== */

    /* --- Primary (Amber — Player Identity) --- */
    --color-primary:            #FFA500;   /* Player amber */
    --color-primary-light:      #FFCC44;   /* Player glow */
    --color-primary-dark:       #CC8800;   /* Darker amber */

    /* --- Secondary (Cyan — Contrast Accent) --- */
    --color-secondary:          #00E0FF;   /* Vampire squid cyan */
    --color-secondary-dark:     #0099BB;

    /* --- Neutral (Dark Abyss Axis) --- */
    --color-neutral-950:        #020618;   /* Abyssal navy — canvas & page background */
    --color-neutral-900:        #040A22;   /* Near-black — subtle surface lift */
    --color-neutral-800:        #0A1230;   /* Dark surface — panels, containers */
    --color-neutral-700:        #101830;   /* Blue-tinted dark — CRT feel */
    --color-neutral-300:        #88BBDD;   /* Muted text — marine snow tint */
    --color-neutral-100:        #CCEEFF;   /* HUD text — pale ice blue */
    --color-neutral-50:         #FFFFFF;   /* Pure white — primary text */

    /* --- Semantic --- */
    --color-success:            #44FFAA;   /* Wave clear, positive */
    --color-warning:            #FFAA00;   /* Caution, amber burst flare */
    --color-error:              #FF1A8C;   /* Anglerfish pink, threat */
    --color-error-strong:       #FF1144;   /* GAME OVER text */
    --color-danger:             #FF44AA;   /* Alien bullet glowing magenta */
    --color-explosion:          #FFAA00;   /* Burst flare */

    /* --- Game-Specific (maps 1:1 to game.js CONFIG) --- */
    --game-bg:                  #020618;
    --game-player:              #FFA500;
    --game-alien-0:             #FF1A8C;
    --game-alien-1:             #00E0FF;
    --game-alien-2:             #CC55FF;
    --game-ufo:                 #88DDFF;
    --game-bullet-player:       #FFCC44;
    --game-bullet-alien:        #FF44AA;
    --game-hud:                 #CCEEFF;
    --game-ground:              #446688;
    --game-barrier:             #FF6688;
    --game-gameover:            #FF1144;
    --game-explosion:           #FFAA00;
    --game-boss:                #FF00FF;
    --game-echo:                #88CCFF;
    --game-current:             #2299CC;
    --game-whirlpool:           #00CCFF;

    /* =====================================================================
       TYPOGRAPHY
       Modular scale: ~1.25 ratio from 16px base. System monospace only.
       ===================================================================== */

    --font-family:              monospace;

    --font-size-xs:             12px;
    --font-size-sm:             16px;   /* Base — HUD text */
    --font-size-md:             20px;   /* Score display */
    --font-size-lg:             24px;   /* Sub-headings, point values */
    --font-size-xl:             32px;   /* Title "FATHOM" */
    --font-size-2xl:            40px;   /* "CRUSHED" (game over) */

    --font-weight-normal:       400;
    --font-weight-bold:         700;

    --line-height-tight:        1.1;
    --line-height-snug:         1.2;
    --line-height-normal:       1.4;
    --line-height-relaxed:      1.5;

    /* =====================================================================
       SPACING SCALE
       4px base grid. All values are pixel-aligned multiples of 4.
       ===================================================================== */

    --space-1:                  4px;    /* Inline gaps, icon padding */
    --space-2:                  8px;    /* Element internal padding */
    --space-3:                  12px;   /* Tight group spacing */
    --space-4:                  16px;   /* Standard gaps (play-area margin) */
    --space-6:                  24px;   /* Section spacing */
    --space-8:                  32px;   /* Large gaps (HUD height region) */
    --space-12:                 48px;   /* Major layout divisions */

    /* =====================================================================
       BORDER RADII
       Minimal — pixel-art games are inherently rectangular.
       ===================================================================== */

    --radius-none:              0px;    /* Game elements (pixel-perfect) */
    --radius-sm:                2px;    /* Subtle rounding */
    --radius-md:                4px;    /* Standard rounding (4px grid aligned) */
    --radius-lg:                8px;    /* Prominent rounding */

    /* =====================================================================
       BOX SHADOWS
       Deep-sea bioluminescent glow theme.
       ===================================================================== */

    --shadow-glow-sm:           0 0 4px rgba(0, 200, 255, 0.3);
    --shadow-glow-md:           0 0 8px rgba(0, 200, 255, 0.4);
    --shadow-glow-lg:           0 0 16px rgba(0, 200, 255, 0.5);
    --shadow-danger-glow:       0 0 8px rgba(255, 26, 140, 0.4);
    --shadow-overlay:           0 4px 24px rgba(0, 0, 0, 0.8);

    /* =====================================================================
       TRANSITIONS
       ===================================================================== */

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

    /* =====================================================================
       GAME DIMENSIONS (reference — used in styles.css, mirrors CONFIG)
       ===================================================================== */

    --canvas-width:             640px;
    --canvas-height:            480px;
}