/* ============================================
   VISIBLEMILES — Semantic Design Tokens
   
   Every color value is a var() reference into
   _palette.css or another token. Zero raw OKLCH.
   
   Sections: UI → World → Non-color → Legacy
   
   Tokens tagged /* placeholder */ will be redesigned
   with final artwork. They use the closest palette
   color by hue and lightness as a stand-in.
   ============================================ */

@font-face {
  font-family: 'Geist Sans';
  src: url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {

  /* ========================================
     UI
     Surfaces, text, icons, borders, accents,
     state, shadows, rarity, minimap, worldmap,
     nameplates, bars, combat UI, misc UI.
     Inverted variants for light-surface contexts.
     ======================================== */

  /* ---- Surfaces ---- */
  --bg-void:          var(--color-black);
  --bg-dark:          var(--color-basalt);
  --bg-panel:         var(--color-graphite);
  --bg-panel-alpha:   var(--color-graphite-95);
  --bg-surface:       var(--color-slate);
  --bg-hover:         var(--color-flint);

  /* ---- Text ---- */
  --text-primary:     var(--color-quartz);
  --text-secondary:   var(--color-silver);
  --text-muted:       var(--color-haze);
  --text-disabled:    var(--color-granite);

  /* ---- Icons (identical to Text) ---- */
  --icon-primary:     var(--color-quartz);
  --icon-secondary:   var(--color-silver);
  --icon-muted:       var(--color-haze);
  --icon-disabled:    var(--color-granite);

  /* ---- Inverted Surfaces (light BG for dark-on-light elements) ---- */
  --bg-inv-void:      var(--color-white);
  --bg-inv-dark:      var(--color-salt);
  --bg-inv-panel:     var(--color-porcelain);
  --bg-inv-surface:   var(--color-chalk);
  --bg-inv-hover:     var(--color-silver);

  /* ---- Inverted Text (dark text on light surfaces) ---- */
  --text-inv-primary:   var(--color-basalt);
  --text-inv-secondary: var(--color-flint);
  --text-inv-muted:     var(--color-granite);
  --text-inv-disabled:  var(--color-haze);

  /* ---- Inverted Icons (identical to Inverted Text) ---- */
  --icon-inv-primary:   var(--color-basalt);
  --icon-inv-secondary: var(--color-flint);
  --icon-inv-muted:     var(--color-granite);
  --icon-inv-disabled:  var(--color-haze);

  /* ---- Text on Semantic Fill (accent, warning, success, danger, punch) ---- */
  --text-on-fill:       var(--color-basalt);

  /* ---- Borders ---- */
  --border-subtle:    var(--color-flint);
  --border-default:   var(--color-granite);
  --border-strong:    var(--color-shale);
  --border-hairline:  1px solid var(--color-white-08);
  --frame-border:     var(--border-default);
  --frame-inner:      var(--bg-surface);
  --frame-border-width: 1px;

  /* ---- Inverted Borders (borders on light surfaces) ---- */
  --border-inv-subtle:  var(--color-silver);
  --border-inv-default: var(--color-haze);
  --border-inv-strong:  var(--color-dust);

  /* ---- Accent ---- */
  --accent:           var(--color-lapis);
  --accent-dim:       var(--color-cobalt);
  --accent-bright:    var(--color-cerulean);
  --accent-hover:     var(--color-lapis-40);

  /* ---- State ---- */
  --danger:           var(--color-garnet);
  --danger-dim:       var(--color-jasper);
  --danger-subtle:    var(--color-jasper);
  --warning:          var(--color-sunstone);
  --warning-subtle:   var(--color-dust);             /* placeholder */
  --success:          var(--color-jade);
  --success-subtle:   var(--color-dust);             /* placeholder */
  --info:             var(--color-lapis);

  /* ---- Shadows ---- */
  --shadow-sm:
    0.3px 0.5px 0.7px oklch(0 0 0 / 0.12),
    0.4px 0.8px 1px oklch(0 0 0 / 0.08),
    1px 2px 2.5px oklch(0 0 0 / 0.08);

  --shadow-md:
    0.5px 1px 1px oklch(0 0 0 / 0.14),
    1px 2px 2px oklch(0 0 0 / 0.12),
    2px 4px 4px oklch(0 0 0 / 0.12),
    4px 8px 8px oklch(0 0 0 / 0.10);

  --shadow-lg:
    0.5px 1px 1px oklch(0 0 0 / 0.15),
    1px 2px 2px oklch(0 0 0 / 0.15),
    2px 4px 4px oklch(0 0 0 / 0.15),
    4px 8px 8px oklch(0 0 0 / 0.15),
    8px 16px 16px oklch(0 0 0 / 0.15);

  --shadow-xl:
    0.5px 1px 1px oklch(0 0 0 / 0.18),
    1.5px 3px 3px oklch(0 0 0 / 0.16),
    3px 6px 6px oklch(0 0 0 / 0.14),
    6px 12px 12px oklch(0 0 0 / 0.12),
    12px 24px 24px oklch(0 0 0 / 0.10),
    24px 48px 48px oklch(0 0 0 / 0.08);

  /* ---- Rarity ---- */
  --rarity-common:    var(--color-stone);
  --rarity-uncommon:  var(--color-emerald);
  --rarity-rare:      var(--color-sapphire);
  --rarity-epic:      var(--color-amethyst);
  --rarity-legendary: var(--color-carnelian);
  --rarity-set:       var(--color-gold);

  /* ---- Level Difficulty ---- */
  --color-level-trivial:  var(--color-haze);         /* placeholder */
  --color-level-easy:     var(--color-jade);         /* placeholder */
  --color-level-normal:   var(--color-silver);       /* placeholder */
  --color-level-hard:     var(--color-copper);       /* placeholder */
  --color-level-deadly:   var(--color-garnet);       /* placeholder */
  --color-level-skull:    var(--color-rhodonite);    /* placeholder */

  /* ---- Minimap ---- */
  --minimap-bg:             var(--bg-dark);
  --minimap-fog:            var(--color-basalt);     /* placeholder */
  --minimap-grid:           var(--color-white-15);
  --minimap-stroke:         var(--color-black-60);
  --minimap-stroke-heavy:   var(--color-black-70);
  --minimap-path:           var(--color-emerald);    /* placeholder */
  --minimap-path-stroke:    var(--color-black-50);
  --minimap-player:         var(--color-quartz);     /* placeholder */
  --minimap-npc:            var(--color-jade);
  --minimap-npc-guard:      var(--color-lapis);
  --minimap-npc-medic:      var(--color-rhodonite);  /* placeholder */
  --minimap-enemy-passive:  var(--color-sunstone);
  --minimap-enemy-engaged:  var(--color-garnet);
  --minimap-enemy-alpha:    var(--color-gold);
  --minimap-object-collect: var(--color-rhodonite);  /* placeholder */
  --minimap-object-read:    var(--color-lapis);      /* placeholder */
  --minimap-object-loot:    var(--color-amber);
  --minimap-object-default: var(--color-rhodonite);  /* placeholder */
  --minimap-vehicle:        var(--color-silver);     /* placeholder */
  --minimap-player-other:   var(--color-cerulean);   /* placeholder */
  --minimap-player-group:   var(--color-jade);       /* placeholder */
  --minimap-player-guild:   var(--color-amethyst);   /* placeholder */

  /* ---- Worldmap ---- */
  --worldmap-fog:              var(--color-basalt);  /* placeholder */
  --worldmap-player:           var(--color-quartz);  /* placeholder */
  --worldmap-player-direction: var(--color-black-80);
  --worldmap-waypoint:         var(--color-cerulean);
  --worldmap-waypoint-stroke:  var(--color-black-60);
  --worldmap-quest-main:       var(--color-gold);
  --worldmap-quest-side:       var(--color-amber);
  --worldmap-merchant:         var(--color-jade);
  --worldmap-save:             var(--color-lapis);   /* placeholder */
  --worldmap-fast-travel:      var(--color-rhodonite); /* placeholder */

  /* ---- Nameplates (placeholder) ---- */
  --nameplate-target:       var(--color-salt);
  --nameplate-target-glow:  var(--color-white-50);
  --nameplate-enemy:        var(--color-garnet);     /* placeholder */
  --nameplate-boss:         var(--color-garnet);     /* placeholder */
  --nameplate-npc:          var(--color-emerald);    /* placeholder */
  --nameplate-player:       var(--color-cerulean);   /* placeholder */
  --nameplate-player-group: var(--color-jade);       /* placeholder */
  --nameplate-player-guild: var(--color-amethyst);   /* placeholder */

  /* ---- Bars (placeholder) ---- */
  --player-hp-color:    var(--color-jade);           /* placeholder */
  --player-hp-bg:       var(--color-slate);          /* placeholder */
  --npc-hp-color:       var(--color-jade);           /* placeholder */
  --npc-hp-bg:          var(--color-slate);          /* placeholder */
  --enemy-hp-color:     var(--color-garnet);
  --enemy-hp-bg:        var(--color-jasper);         /* placeholder */
  --enemy-charge-color: var(--color-copper);         /* placeholder */
  --enemy-charge-bg:    var(--color-coal);           /* placeholder */
  --player-charge-color:var(--color-lapis);
  --player-charge-bg:   var(--color-cobalt);         /* placeholder */
  --npc-charge-color:   var(--color-lapis);
  --npc-charge-bg:      var(--color-cobalt);         /* placeholder */
  --xp-color:           var(--color-rhodonite);      /* placeholder */
  --xp-bg:              var(--color-graphite);       /* placeholder */
  --cast-enemy:         var(--color-sunstone);       /* placeholder */
  --cast-interruptible: var(--color-garnet);         /* placeholder */
  --cast-player:        var(--color-cerulean);       /* placeholder */
  --xp-rested:          var(--color-lapis);          /* placeholder */
  --cast-bar-bg:        var(--color-graphite);       /* placeholder */
  --death-message:      var(--color-haze);           /* placeholder */

  /* ---- AoE / Telegraph / Reticle (placeholder) ---- */
  --aoe-hostile:        var(--color-garnet);         /* placeholder */
  --aoe-warm:           var(--color-copper);         /* placeholder */
  --aoe-ice:            var(--color-cerulean);       /* placeholder */
  --aoe-implode:        var(--color-sapphire);       /* placeholder */
  --aoe-nature:         var(--color-gold);           /* placeholder */
  --aoe-npc:            var(--color-lapis);          /* placeholder */
  --telegraph-zone:     var(--color-copper);         /* placeholder */
  --telegraph-fill:     var(--color-garnet);         /* placeholder */
  --telegraph-border:   var(--color-sunstone);       /* placeholder */
  --reticle-border:     var(--color-garnet);         /* placeholder */
  --reticle-bg:         var(--color-jasper);         /* placeholder */
  --reticle-border-alt: var(--color-garnet);         /* placeholder */
  --reticle-bg-alt:     var(--color-jasper);         /* placeholder */

  /* ---- Damage / Proc / Misc UI (placeholder) ---- */
  --damage-crit:        var(--color-garnet);         /* placeholder */
  --damage-burn:        var(--color-copper);         /* placeholder */
  --damage-burn-shadow: var(--color-garnet-80);      /* placeholder */
  --damage-burn-glow:   var(--color-copper-60);      /* placeholder */
  --damage-vehicle:     var(--color-cerulean);       /* placeholder */
  --damage-vehicle-shadow: var(--color-cobalt-80);   /* placeholder */
  --damage-vehicle-glow:var(--color-cerulean-80);    /* placeholder */
  --proc-glow:          var(--color-gold);           /* placeholder */
  --proc-glow-dim:      var(--color-dust);           /* placeholder */
  --proc-glow-ambient:  var(--color-gold-50);
  --proc-glow-subtle:   var(--color-gold-15);
  --celebration-glow:   var(--color-gold-30);
  --redock-bg:          var(--color-lapis-10);
  --xp-rested-mid:      var(--color-cobalt);         /* placeholder */
  --xp-rested-dark:     var(--color-cobalt);         /* placeholder */
  --terminal-cmd-bg:    var(--color-basalt);         /* placeholder */
  --modal-hover:        var(--color-cerulean);       /* placeholder */
  --overlay-bg-warm:    var(--color-basalt);         /* placeholder */

  /* ========================================
     WORLD
     Terrain, structures, vehicles, ships,
     trains, combat effects, projectiles,
     particles, weather, lighting, fog.
     ======================================== */

  /* ---- Terrain: Shared ---- */
  --bg-world:               var(--color-sand);
  --terrain-road:           var(--color-umber);          /* placeholder — packed dirt */
  --terrain-rock:           var(--color-peat);           /* placeholder — exposed rock */
  --terrain-scrap:          var(--color-granite);        /* placeholder */
  --terrain-planks:         var(--color-clay);           /* placeholder — warm wood */
  --map-bg:                 var(--color-amber);          /* placeholder */

  /* ---- Terrain: Drycross Outskirts ---- */
  --terrain-drycross:       var(--color-sand);           /* placeholder */
  --terrain-drycross-dark:  var(--color-dust);           /* placeholder */
  --terrain-drycross-light: var(--color-sandstone);      /* placeholder — sun-bleached */

  /* ---- Terrain: Dustlands (NW) ---- */
  --terrain-dustlands:       var(--color-sand);          /* placeholder */
  --terrain-dustlands-dark:  var(--color-sienna);        /* placeholder — weathered sand */
  --terrain-dustlands-light: var(--color-sandstone);     /* placeholder — natural dune */

  /* ---- Terrain: Sunken Flats (SW) ---- */
  --terrain-flats:           var(--color-stone);         /* placeholder */
  --terrain-flats-dark:      var(--color-umber);         /* placeholder — mineral deposits */
  --terrain-flats-light:     var(--color-silver);        /* placeholder */

  /* ---- Terrain: Iron Wastes (NE) ---- */
  --terrain-wastes:          var(--color-clay);          /* placeholder — oxidized earth */
  --terrain-wastes-dark:     var(--color-peat);          /* placeholder — scorched ground */
  --terrain-wastes-light:    var(--color-sienna);        /* placeholder — weathered rust */

  /* ---- Terrain: The Scorch (SE) ---- */
  --terrain-scorch:          var(--color-peat);          /* placeholder — scorched earth */
  --terrain-scorch-dark:     var(--color-charcoal);      /* placeholder — volcanic dark */
  --terrain-scorch-light:    var(--color-umber);         /* placeholder — ash over earth */

  /* ---- Actors ---- */
  --sprite-outline:     var(--color-charcoal);
  --particle-outline:   var(--color-charcoal);

  /* Skin tones — character creation swatches (Fitzpatrick I-VI) */
  --skin-1:             var(--color-alabaster);
  --skin-2:             var(--color-sandstone);
  --skin-3:             var(--color-sienna);
  --skin-4:             var(--color-clay);
  --skin-5:             var(--color-umber);
  --skin-6:             var(--color-peat);

  /* Hair colors — character creation swatches */
  --hair-black:         var(--color-coal);
  --hair-brown:         var(--color-dust);
  --hair-auburn:        var(--color-copper);
  --hair-blonde:        var(--color-amber);
  --hair-gray:          var(--color-silver);
  --hair-white:         var(--color-quartz);
  --hair-red:           var(--color-garnet);
  --hair-blue:          var(--color-lapis);

  /* ---- Building: Base ---- */
  --building-base-wall:          var(--color-coal);
  --building-base-floor:         var(--color-dust);           /* placeholder */
  --building-base-sandbag:       var(--color-dust);           /* placeholder */
  --building-base-debris:        var(--color-slate);          /* placeholder */
  --building-base-rubble:        var(--color-coal);           /* placeholder */

  /* ---- Building: Depot ---- */
  --building-depot-wall:         var(--color-coal);
  --building-depot-concrete:     var(--color-granite);        /* placeholder */
  --building-depot-concrete-dark:var(--color-flint);          /* placeholder */
  --building-depot-floor:        var(--color-dust);           /* placeholder */
  --building-depot-ballast:      var(--color-granite);        /* placeholder */

  /* ---- Vehicles (placeholder) ---- */
  --vehicle-industrial: var(--color-amber);
  --vehicle-military:   var(--color-dust);
  --vehicle-private:    var(--color-cerulean);
  --vehicle-emergency:  var(--color-silver);         /* placeholder */

  /* Vehicle lights */
  --vehicle-light-off:  var(--color-coal);           /* placeholder */
  --vehicle-brake:      var(--color-garnet);         /* placeholder */
  --vehicle-brake-glow: var(--color-garnet);         /* placeholder */
  --vehicle-brake-glow-outer: var(--color-garnet);   /* placeholder */
  --vehicle-brake-inset:var(--color-mesa);           /* placeholder */
  --vehicle-signal:     var(--color-sunstone);       /* placeholder */
  --vehicle-signal-glow:var(--color-sunstone);       /* placeholder */
  --vehicle-signal-glow-outer: var(--color-sunstone); /* placeholder */
  --vehicle-signal-inset:var(--color-amber);         /* placeholder */
  --vehicle-headlight:  var(--color-salt);           /* placeholder */

  /* Vehicle archetype outlines */
  --vehicle-outline-skiff:    var(--color-dust);     /* placeholder */
  --vehicle-outline-apc:      var(--color-graphite); /* placeholder */
  --vehicle-outline-luxury:   var(--color-graphite); /* placeholder */
  --vehicle-outline-luxury-glow: var(--color-amber); /* placeholder */
  --vehicle-outline-ute:      var(--color-dust);     /* placeholder */
  --vehicle-outline-hauler:   var(--color-coal);     /* placeholder */
  --vehicle-outline-rig:      var(--color-coal);     /* placeholder */
  --vehicle-outline-vanguard: var(--color-coal);     /* placeholder */
  --vehicle-outline-guard:    var(--color-cobalt);   /* placeholder */
  --vehicle-outline-speeder:  var(--color-cobalt);   /* placeholder */
  --vehicle-outline-cruiser:  var(--color-cobalt);   /* placeholder */
  --vehicle-outline-patrol:   var(--color-cobalt);   /* placeholder */
  --vehicle-outline-sedan:    var(--color-cobalt);   /* placeholder */
  --vehicle-outline-runner:   var(--color-cobalt);   /* placeholder */
  --vehicle-outline-tanker:   var(--color-jade);     /* placeholder */
  --vehicle-outline-tanker-glow: var(--color-sunstone); /* placeholder */

  /* ---- Ships (placeholder) ---- */
  --ship-stroke:        var(--color-graphite);
  --ship-hull-cargo:    var(--color-cobalt);         /* placeholder */
  --ship-hull-military: var(--color-jade);           /* placeholder */
  --ship-hull-civilian: var(--color-sand);           /* placeholder */
  --ship-darkness:      var(--color-basalt);         /* placeholder */
  --ship-sand-tint:     var(--weather-sandstorm);
  --ship-thunder-tint:  var(--color-flint);          /* placeholder */
  --ship-lightning-flash: var(--color-glacier);      /* placeholder */
  --ship-cockpit:       var(--color-slate);          /* placeholder */
  --ship-cockpit-frame: var(--color-flint);          /* placeholder */
  --ship-cockpit-frame-top: var(--color-granite);    /* placeholder */
  --ship-cockpit-military: var(--color-graphite);    /* placeholder */
  --ship-cockpit-civilian: var(--color-flint);       /* placeholder */
  --ship-light:         var(--color-amber);          /* placeholder */
  --ship-light-landing: var(--color-salt);           /* placeholder */
  --ship-pad-off:       var(--color-granite);        /* placeholder */
  --ship-pad-active:    var(--color-emerald);        /* placeholder */
  --ship-interior-gradient: var(--color-basalt);     /* placeholder */

  /* ---- Trains (placeholder) ---- */
  --train-engine-body:    var(--color-coal);         /* placeholder */
  --train-engine-outline: var(--color-graphite);     /* placeholder */
  --train-car-body:       var(--color-coal);         /* placeholder */
  --train-car-outline:    var(--color-slate);        /* placeholder */
  --train-headlight-off:  var(--color-coal);         /* placeholder */
  --train-headlight:      var(--color-salt);         /* placeholder */
  --train-debug:          var(--color-lapis);        /* placeholder */

  /* ---- Crates (placeholder) ---- */
  --crate-standard:     var(--color-copper);         /* placeholder */
  --crate-dark:         var(--color-dust);           /* placeholder */
  --crate-light:        var(--color-copper);         /* placeholder */

  /* ---- Punch Accents (placeholder) ---- */
  --punch-error-dark:          var(--color-dust);    /* placeholder */
  --punch-error:               var(--color-copper);  /* placeholder */
  --punch-error-bright:        var(--color-mesa);    /* placeholder */
  --punch-compliance-dark:     var(--color-cobalt);  /* placeholder */
  --punch-compliance:          var(--color-cerulean); /* placeholder */
  --punch-compliance-bright:   var(--color-glacier); /* placeholder */
  --punch-plum-dark:           var(--color-rhodonite); /* placeholder */
  --punch-plum:                var(--color-rhodonite); /* placeholder */
  --punch-plum-bright:         var(--color-rhodonite); /* placeholder */
  --punch-highlight-dark:      var(--color-jade);    /* placeholder */
  --punch-highlight:           var(--color-emerald); /* placeholder */
  --punch-highlight-bright:    var(--color-peridot); /* placeholder */
  --punch-amber:               var(--color-amber);   /* placeholder */

  /* ---- Combat Effects (placeholder) ---- */
  /* Hostile (H=44) */
  --combat-hostile-flash:  var(--color-mesa);        /* placeholder */
  --combat-hostile-vivid:  var(--color-amber);       /* placeholder */
  --combat-hostile-strong: var(--color-copper);      /* placeholder */
  --combat-hostile-mid:    var(--color-dust);        /* placeholder */
  --combat-hostile-dark:   var(--color-coal);        /* placeholder */
  --combat-hostile-smoke:  var(--color-coal);        /* placeholder */
  /* Player (H=260) */
  --combat-player-flash:   var(--color-quartz);      /* placeholder */
  --combat-player-vivid:   var(--color-glacier);     /* placeholder */
  --combat-player-strong:  var(--color-cerulean);    /* placeholder */
  --combat-player-mid:     var(--color-lapis);       /* placeholder */
  --combat-player-dark:    var(--color-cobalt);      /* placeholder */
  --combat-player-smoke:   var(--color-flint);       /* placeholder */
  /* Psionic (H=340) */
  --combat-psionic-flash:  var(--color-salt);        /* placeholder */
  --combat-psionic-vivid:  var(--color-rhodonite);   /* placeholder */
  --combat-psionic-strong: var(--color-rhodonite);   /* placeholder */
  --combat-psionic-mid:    var(--color-rhodonite);   /* placeholder */
  --combat-psionic-dark:   var(--color-flint);       /* placeholder */
  --combat-psionic-smoke:  var(--color-flint);       /* placeholder */
  /* Nature (H=117) */
  --combat-nature-flash:   var(--color-peridot);     /* placeholder */
  --combat-nature-vivid:   var(--color-emerald);     /* placeholder */
  --combat-nature-strong:  var(--color-jade);        /* placeholder */
  --combat-nature-mid:     var(--color-jade);        /* placeholder */
  --combat-nature-dark:    var(--color-coal);        /* placeholder */
  --combat-nature-smoke:   var(--color-coal);        /* placeholder */

  /* ---- Projectiles ---- */
  --projectile-player:    var(--combat-player-vivid);
  --projectile-enemy:     var(--combat-hostile-vivid);
  --projectile-psionic:   var(--combat-psionic-vivid);
  --projectile-nature:    var(--combat-nature-vivid);
  --projectile-fire:      var(--combat-hostile-vivid);
  --projectile-ice:       var(--combat-player-vivid);
  --projectile-guard:     var(--combat-nature-vivid);
  --projectile-npc-default:     var(--projectile-guard);
  --projectile-npc-enhanced:    var(--combat-nature-vivid);
  --projectile-fire-bolt:       var(--projectile-fire);
  --projectile-cast-generic:    var(--projectile-psionic);
  --projectile-cast-default: var(--projectile-player);
  --projectile-fireball:        var(--projectile-fire);
  --projectile-immolate:        var(--projectile-fire);
  --projectile-incinerate:      var(--projectile-fire);
  --projectile-heal-bolt:       var(--combat-nature-vivid);
  --projectile-dark-plum:       var(--combat-psionic-vivid);

  /* ---- Particles (placeholder) ---- */
  /* Dust (sandstorm) */
  --particle-dust-1:  var(--color-amber);            /* placeholder */
  --particle-dust-2:  var(--color-copper);           /* placeholder */
  --particle-dust-3:  var(--color-copper);           /* placeholder */
  --particle-dust-4:  var(--color-dust);             /* placeholder */
  --particle-dust-5:  var(--color-dust);             /* placeholder */
  --particle-dust-6:  var(--color-copper);           /* placeholder */
  --particle-dust-7:  var(--color-emerald);          /* placeholder */
  /* Rain */
  --particle-rain-1:  var(--color-glacier);          /* placeholder */
  --particle-rain-2:  var(--color-cerulean);         /* placeholder */
  --particle-rain-3:  var(--color-lapis);            /* placeholder */
  --particle-rain-4:  var(--color-lapis);            /* placeholder */
  --particle-rain-5:  var(--color-cobalt);           /* placeholder */
  /* Ember/Smoke (laser kill) */
  --particle-ember-1: var(--combat-hostile-vivid);
  --particle-ember-2: var(--combat-hostile-strong);
  --particle-ember-3: var(--color-copper);           /* placeholder */
  --particle-ember-4: var(--color-dust);             /* placeholder */
  --particle-ember-5: var(--combat-hostile-dark);
  --particle-ember-6: var(--combat-hostile-smoke);
  /* Explosion (AoE kill) */
  --particle-explode-1: var(--combat-hostile-flash);
  --particle-explode-2: var(--color-mesa);           /* placeholder */
  --particle-explode-3: var(--combat-hostile-vivid);
  --particle-explode-4: var(--combat-hostile-strong);
  --particle-explode-5: var(--color-copper);         /* placeholder */
  --particle-explode-6: var(--combat-hostile-dark);
  /* Dice (melee kill) */
  --particle-dice-1:  var(--color-stone);            /* placeholder */
  --particle-dice-2:  var(--color-dust);             /* placeholder */
  --particle-dice-3:  var(--color-dust);             /* placeholder */
  --particle-dice-4:  var(--combat-hostile-dark);
  --particle-dice-5:  var(--color-coal);             /* placeholder */
  --particle-dice-6:  var(--combat-hostile-smoke);
  /* Vaporize (DoT kill) */
  --particle-vapor-1: var(--combat-player-flash);
  --particle-vapor-2: var(--color-glacier);          /* placeholder */
  --particle-vapor-3: var(--combat-player-vivid);
  --particle-vapor-4: var(--color-cerulean);         /* placeholder */
  --particle-vapor-5: var(--color-lapis);            /* placeholder */
  --particle-vapor-6: var(--color-cobalt);           /* placeholder */
  /* Crush (vehicle kill) */
  --particle-crush-1: var(--color-stone);            /* placeholder */
  --particle-crush-2: var(--color-dust);             /* placeholder */
  --particle-crush-3: var(--color-dust);             /* placeholder */
  --particle-crush-4: var(--combat-hostile-dark);
  --particle-crush-5: var(--color-coal);             /* placeholder */
  --particle-crush-6: var(--combat-hostile-smoke);

  /* ---- Death Debris (placeholder) ---- */
  --death-debris-core:  var(--color-graphite);       /* placeholder */
  --death-debris-mid:   var(--color-coal);           /* placeholder */
  --death-debris-outer: var(--color-coal);           /* placeholder */

  /* ---- Weather: Lighting ---- */
  --weather-lamp:               var(--color-amber);
  --weather-torch-hue:          44;

  /* ---- Weather: Sandstorm ---- */
  --weather-sandstorm:          var(--color-copper);

  /* ---- Weather: Thunderstorm ---- */
  --weather-thunder:            var(--color-flint);
  --weather-lightning:          var(--color-quartz);
  --weather-lightning-glow:     var(--color-salt);
  --weather-lightning-overlay:  var(--color-glacier);
  --weather-lightning-target:   var(--color-glacier);

  /* ---- Weather: Rain ---- */
  --weather-rain:               var(--color-cerulean);
  --weather-rain-mid:           var(--color-cerulean);
  --weather-rain-core:          var(--color-cerulean);

  /* ---- Weather: Night ---- */
  --weather-night:              var(--color-basalt);
  --weather-night-sand:         var(--color-copper);
  --weather-night-thunder:      var(--color-flint);

  /* ---- Weather: Fog ---- */
  --weather-fog:                var(--color-graphite);
  --weather-fog-reveal:         var(--color-graphite);
  --weather-fog-roof:           var(--color-basalt);

  /* Weather badges */
  --weather-badge-sandstorm-bg:   var(--color-copper);   /* placeholder */
  --weather-badge-sandstorm-text: var(--color-slate);    /* placeholder */
  --weather-badge-sandstorm-glow: var(--color-copper);   /* placeholder */
  --weather-badge-thunder-bg:     var(--color-shale);    /* placeholder */
  --weather-badge-thunder-text:   var(--color-quartz);   /* placeholder */
  --weather-badge-thunder-glow:   var(--color-lapis);    /* placeholder */
  --weather-badge-thunder-pulse:  var(--color-cerulean); /* placeholder */
  --weather-badge-dust-bg:        var(--color-amber);    /* placeholder */
  --weather-badge-dust-text:      var(--color-coal);     /* placeholder */
  --weather-badge-dust-glow:      var(--color-copper);   /* placeholder */
  --weather-badge-rain-bg:        var(--color-shale);    /* placeholder */
  --weather-badge-rain-text:      var(--color-quartz);   /* placeholder */
  --weather-badge-rain-glow:      var(--color-shale);    /* placeholder */

  /* ---- Signals (placeholder) ---- */
  --signal-green:       var(--color-emerald);        /* placeholder */
  --signal-green-glow:  var(--color-emerald);        /* placeholder */
  --signal-yellow:      var(--color-gold);           /* placeholder */
  --signal-yellow-glow: var(--color-gold);           /* placeholder */
  --signal-red:         var(--color-garnet);         /* placeholder */
  --signal-red-glow:    var(--color-garnet);         /* placeholder */
  --emergency-red:      var(--color-garnet);         /* placeholder */
  --emergency-blue:     var(--color-sapphire);       /* placeholder */

  /* ---- Map Skeleton ---- */
  --map-road-border:    var(--color-sand);           /* placeholder */
  --map-lane:           var(--building-base-sandbag);
  --map-track-core:     var(--building-base-rubble);
  --map-wall:           var(--building-base-wall);
  --map-sandbag:        var(--building-base-floor);

  /* ---- Zone Debug (placeholder) ---- */
  --zone-drycross-start: var(--color-emerald);       /* placeholder */
  --zone-dustlands:      var(--color-peridot);       /* placeholder */
  --zone-sunken-flats:   var(--color-copper);        /* placeholder */
  --zone-iron-wastes:    var(--color-garnet);        /* placeholder */
  --zone-the-scorch:     var(--color-rhodonite);     /* placeholder */

  /* ---- Map Debug Overlay (placeholder) ---- */
  --map-debug-primary:       var(--color-glacier);   /* placeholder */
  --map-debug-primary-sub:   var(--color-glacier);   /* placeholder */
  --map-debug-secondary:     var(--color-rhodonite); /* placeholder */
  --map-debug-tertiary:      var(--color-emerald);   /* placeholder */
  --map-debug-buffer-bg:     var(--color-garnet);    /* placeholder */
  --map-debug-buffer-border: var(--color-garnet);    /* placeholder */
  --map-discovered-marker:   var(--color-emerald);   /* placeholder */
  --map-undiscovered-marker: var(--color-garnet);    /* placeholder */

  /* ========================================
     NON-COLOR
     Layout, spacing, sizes, timing, typography.
     Unchanged from prior system.
     ======================================== */

  /* ---- Layout ---- */
  --tile-size: 24px;
  --map-width: 120;
  --map-height: 80;

  /* ---- Spacing (4px grid) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Component Sizes ---- */
  --size-icon-xs:     12px;
  --size-icon-sm:     16px;
  --size-icon-md:     24px;
  --size-icon-lg:     32px;
  --size-icon-xl:     40px;
  --size-bar-sm:      4px;
  --size-bar-md:      8px;
  --size-bar-lg:      12px;
  --size-portrait-sm: 40px;
  --size-portrait-md: 56px;
  --size-portrait-lg: 64px;
  --size-slot:        56px;
  --size-slot-sm:     40px;

  /* ---- GUI Padding ---- */
  --gui-padding:      var(--space-2);
  --gui-padding-sm:   var(--space-1);
  --gui-gap:          var(--space-2);
  --gui-gap-sm:       var(--space-1);
  --gui-gap-md:       var(--space-3);
  --gui-gap-lg:       var(--space-4);
  --gui-margin:       1rem;
  --gui-margin-sm:    0.5rem;

  /* ---- Timing ---- */
  --move-duration: 280ms;
  --move-steps: 4;
  --ui-transition: 180ms;
  --fade-snappy: 150ms;
  --fade-quick: 200ms;
  --fade-standard: 300ms;
  --fade-slow: 500ms;
  --fade-dramatic: 800ms;

  /* ---- Typography ---- */
  --font-sans: 'Geist Sans', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-dialogue: var(--font-sans);
  --font-nameplate: var(--font-sans);
  --font-numbers: var(--font-mono);

  --font-size-2xs: 0.5rem;
  --font-size-xs:  0.6rem;
  --font-size-sm:  0.7rem;
  --font-size-md:  0.8rem;
  --font-size-lg:  0.9rem;
  --font-size-xl:  1rem;
  --font-size-2xl: 1.2rem;
  --font-size-3xl: 1.5rem;
  --font-size-4xl: 2rem;

  --frame-name-size:      var(--font-size-md);
  --frame-level-size:     var(--font-size-xs);
  --frame-bar-text-size:  var(--font-size-xs);
  --effect-icon-size:     var(--font-size-xs);
  --effect-timer-size:    var(--font-size-2xs);
  --ability-icon-size:    var(--font-size-sm);
  --ability-timer-size:   var(--font-size-2xs);
  --portrait-icon-size:   var(--font-size-3xl);
  --action-icon-size:     var(--font-size-2xl);
  --action-label-size:    var(--font-size-2xs);
  --action-key-size:      var(--font-size-2xs);
  --stat-label-size:      var(--font-size-sm);
  --stat-value-size:      var(--font-size-sm);
  --panel-title-size:     var(--font-size-md);
  --panel-text-size:      var(--font-size-sm);

  /* ========================================
     LEGACY ALIASES
     Old token names → new names via var().
     Kept for backwards compatibility.
     ======================================== */

  /* --- Renamed palette colors --- */
  --color-ink:                var(--color-graphite);
  --color-cream:              var(--color-salt);
  --color-blue-dark:          var(--color-cobalt);
  --color-blue:               var(--color-lapis);
  --color-blue-soft:          var(--color-cerulean);
  --color-teal-dark:          var(--color-cobalt);
  --color-teal:               var(--color-lapis);
  --color-teal-soft:          var(--color-cerulean);

  /* --- Removed palette colors (legacy refs still resolve) --- */
  --color-earth:              var(--color-coal);
  --color-fog:                var(--color-silver);
  --color-parchment:          var(--color-silver);
  --color-bone:               var(--color-quartz);

  /* --- Brand anchors → palette --- */
  --human-error:              var(--color-mesa);
  --compliance-blue:          var(--color-glacier);
  --administrative-plum:      var(--color-rhodonite);
  --reconciliation-highlight: var(--color-peridot);
  --clean-buffer:             var(--color-salt);
  --terminal-black:           var(--color-slate);

  /* --- Semantic color aliases --- */
  --color-danger:             var(--color-garnet);
  --color-danger-dim:         var(--color-jasper);
  --color-warning:            var(--color-sunstone);
  --color-success:            var(--color-jade);
  --color-info:               var(--color-lapis);
  --danger-dark:              var(--danger-dim);
  --world-bg:                 var(--bg-world);
  --black:                    var(--bg-void);

  /* --- Inverted surface aliases (session 284 rename) --- */
  --bg-inv:                   var(--bg-inv-dark);
  --bg-inv-dim:               var(--color-quartz);

  /* --- Rarity aliases --- */
  --color-rarity-common:      var(--rarity-common);
  --color-rarity-uncommon:    var(--rarity-uncommon);
  --color-rarity-rare:        var(--rarity-rare);
  --color-rarity-epic:        var(--rarity-epic);
  --color-rarity-legendary:   var(--rarity-legendary);
  --color-set-bonus:          var(--rarity-set);
  --rarity-green:             var(--rarity-uncommon);
  --rarity-blue:              var(--rarity-rare);
  --rarity-gold:              var(--rarity-legendary);

  /* --- Level aliases --- */
  --level-trivial:    var(--color-level-trivial);
  --level-easy:       var(--color-level-easy);
  --level-normal:     var(--color-level-normal);
  --level-hard:       var(--color-level-hard);
  --level-very-hard:  var(--color-level-deadly);
  --level-impossible: var(--color-level-skull);

  /* --- Alpha channel aliases --- */
  --alpha-black-90:   var(--color-black-90);
  --alpha-black-80:   var(--color-black-80);
  --alpha-black-70:   var(--color-black-70);
  --alpha-black-60:   var(--color-black-60);
  --alpha-black-50:   var(--color-black-50);
  --alpha-black-40:   var(--color-black-40);
  --alpha-black-30:   var(--color-black-30);
  --alpha-black-20:   var(--color-black-20);
  --alpha-black-00:   var(--color-black-00);
  --alpha-white-90:   var(--color-white-90);
  --alpha-white-70:   var(--color-white-70);
  --alpha-white-50:   var(--color-white-50);
  --alpha-white-45:   var(--color-white-45);
  --alpha-white-40:   var(--color-white-40);
  --alpha-white-35:   var(--color-white-35);
  --alpha-white-20:   var(--color-white-20);
  --alpha-white-15:   var(--color-white-15);
  --alpha-white-11:   var(--color-white-11);
  --alpha-white-10:   var(--color-white-10);
  --alpha-white-08:   var(--color-white-08);
  --alpha-white-05:   var(--color-white-05);
  --alpha-white-03:   var(--color-white-03);
  --alpha-white-02:   var(--color-white-02);

  /* --- Water (only oasis-edge is used) --- */
  --water-oasis-edge: var(--color-lapis);

  /* --- HP/Charge bar aliases --- */
  --hp-color:         var(--player-hp-color);
  --hp-bg:            var(--player-hp-bg);
  --charge-color:     var(--enemy-charge-color);
  --charge-bg:        var(--enemy-charge-bg);

  /* --- Terrain aliases --- */
  --terrain-sand:       var(--terrain-drycross);
  --terrain-sand-dark:  var(--terrain-drycross-dark);
  --terrain-sand-light: var(--terrain-drycross-light);
  --terrain-stone:      var(--terrain-flats);
  --terrain-ash:        var(--terrain-scorch);
  --terrain-salt:       var(--terrain-flats-light);
  --sand:               var(--terrain-drycross);
  --sand-dark:          var(--terrain-drycross-dark);
  --stone-light:        var(--terrain-flats);
  --rock:               var(--terrain-road);
  --road:               var(--terrain-road);
  --scrap-town:         var(--terrain-scrap);
  --planks:             var(--terrain-planks);
  --ash:                var(--terrain-scorch);
  --salt:               var(--terrain-flats-light);

  /* --- Structure aliases --- */
  --structure-wall:          var(--building-base-wall);
  --structure-floor:         var(--building-base-floor);
  --structure-sandbag:       var(--building-base-sandbag);
  --structure-debris:        var(--building-base-debris);
  --structure-rubble:        var(--building-base-rubble);
  --structure-concrete:      var(--building-depot-concrete);
  --structure-concrete-dark: var(--building-depot-concrete-dark);
  --structure-ballast:       var(--building-depot-ballast);
  --wall:                    var(--building-base-wall);

  /* --- Weather / lighting / fog aliases --- */
  --light-lamp:              var(--weather-lamp);
  --torch-glow-hue:          var(--weather-torch-hue);
  --lightning-overlay:       var(--weather-lightning-overlay);
  --lightning-flash-target:  var(--weather-lightning-target);
  --weather-rain-drop:       var(--weather-rain);
  --rain-streak-mid:         var(--weather-rain-mid);
  --rain-streak-core:        var(--weather-rain-core);
  --darkness-night:          var(--weather-night);
  --darkness-sand:           var(--weather-night-sand);
  --darkness-thunder:        var(--weather-night-thunder);
  --fog-tile:                var(--weather-fog);
  --fog-reveal:              var(--weather-fog-reveal);
  --roof-darkness:           var(--weather-fog-roof);

  /* --- Punch accent aliases --- */
  --punch-coral-dark:    var(--punch-error-dark);
  --punch-coral:         var(--punch-error);
  --punch-coral-bright:  var(--punch-error-bright);
  --punch-cyan-dark:     var(--punch-compliance-dark);
  --punch-cyan:          var(--punch-compliance);
  --punch-cyan-bright:   var(--punch-compliance-bright);
  --punch-azure-dark:    var(--punch-compliance-dark);
  --punch-azure:         var(--punch-compliance);
  --punch-azure-bright:  var(--punch-compliance-bright);
  --punch-magenta-dark:  var(--punch-plum-dark);
  --punch-magenta:       var(--punch-plum);
  --punch-magenta-bright:var(--punch-plum-bright);
  --punch-acid-dark:     var(--punch-highlight-dark);
  --punch-acid:          var(--punch-highlight);
  --punch-acid-bright:   var(--punch-highlight-bright);
  --punch-gold-dark:     var(--punch-highlight-dark);
  --punch-gold:          var(--punch-highlight);
  --punch-gold-bright:   var(--punch-highlight-bright);
}

/* ========================================
   SHADOW SYSTEM
   Dynamic shadows based on sun position
   (CSS vars set by time.js)
   
   NOTE: Shadow transitions removed for performance.
   Transitioning :root custom properties causes style recalc
   on ALL inheriting elements every frame. The 90s update
   interval with subtle values makes jumps imperceptible.
   ======================================== */

/* High contrast preference — boost translucent borders/backgrounds.
   Must be after the base :root block to win by source order. */
@media (prefers-contrast: more) {
  :root {
    --alpha-white-08: oklch(1 0 0 / 0.2);
    --alpha-white-05: oklch(1 0 0 / 0.15);
    --alpha-white-10: oklch(1 0 0 / 0.25);
    --alpha-white-40: oklch(1 0 0 / 0.6);
    --alpha-black-40: oklch(0 0 0 / 0.6);
    --alpha-black-70: oklch(0 0 0 / 0.85);
  }
}