/* ============================================================================
   variables.css — Design tokens, theme palettes, quality tiers
   ========================================================================== */

:root {
  /* ---------- Core brand ramp ---------- */
  --c-cyan:        #00f0ff;
  --c-cyan-soft:   #7ff6ff;
  --c-magenta:     #ff2d75;
  --c-violet:      #9b6bff;
  --c-amber:       #ffb020;
  --c-lime:        #7cff5a;
  --c-red:         #ff4433;
  --c-blue:        #3b82f6;

  /* ---------- Surfaces ---------- */
  --bg-void:       #04060d;
  --bg-deep:       #070b16;
  --bg-panel:      rgba(10, 16, 30, 0.62);
  --bg-panel-2:    rgba(14, 22, 40, 0.78);
  --bg-raise:      rgba(24, 36, 62, 0.72);
  --bg-sunken:     rgba(4, 7, 15, 0.55);

  /* ---------- Text ---------- */
  --tx-hi:         #eaf4ff;
  --tx:            #b9cbe4;
  --tx-lo:         #93a6c0;
  --tx-dim:        #7a8ba6;
  --tx-mute:       #55647c;

  /* ---------- Lines & glass ---------- */
  --line:          rgba(120, 190, 255, 0.16);
  --line-hi:       rgba(0, 240, 255, 0.45);
  --glass-blur:    16px;
  --glass-bg:      linear-gradient(160deg, rgba(28, 44, 78, 0.55), rgba(8, 13, 26, 0.72));
  --glass-edge:    inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.35);

  /* ---------- Glow / shadow ---------- */
  --glow-cyan:     0 0 12px rgba(0, 240, 255, 0.55), 0 0 34px rgba(0, 240, 255, 0.22);
  --glow-magenta:  0 0 12px rgba(255, 45, 117, 0.55), 0 0 34px rgba(255, 45, 117, 0.22);
  --glow-amber:    0 0 12px rgba(255, 176, 32, 0.55), 0 0 30px rgba(255, 176, 32, 0.20);
  --shadow-panel:  0 18px 46px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-btn:    0 8px 22px rgba(0, 0, 0, 0.45);

  /* ---------- Geometry ---------- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---------- Rhythm (scales with viewport, see responsive.css) ---------- */
  --u:    clamp(3px, 0.42vh, 6px);
  --gap:  calc(var(--u) * 2);
  --pad:  calc(var(--u) * 2.4);

  /* ---------- Type scale ---------- */
  --fs-nano:  clamp(7px,  0.82vh, 10px);
  --fs-micro: clamp(8px,  0.95vh, 12px);
  --fs-xs:    clamp(9px,  1.12vh, 14px);
  --fs-sm:    clamp(11px, 1.36vh, 17px);
  --fs-md:    clamp(13px, 1.64vh, 21px);
  --fs-lg:    clamp(16px, 2.20vh, 30px);
  --fs-xl:    clamp(22px, 3.30vh, 46px);
  --fs-2xl:   clamp(30px, 5.20vh, 76px);

  --ff-display: "Orbitron", "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --ff-body:    "Rajdhani", "Segoe UI", "Roboto Condensed", system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   460ms;
  --t-scene:  680ms;
  --motion:   1; /* multiplied out by reduced-motion mode */

  /* ---------- Layout safe-areas ---------- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* ---------- HUD tuning ---------- */
  --hud-scale: 1;
  --hud-opacity: 0.97;

  /* ---------- Live theme accents (overwritten by [data-theme]) ---------- */
  --th-a: #00f0ff;
  --th-b: #ff2d75;
  --th-c: #9b6bff;
  --th-bg0: #05070f;
  --th-bg1: #0b1226;
  --th-fog: rgba(0, 240, 255, 0.07);
}

/* ==========================================================================
   ENVIRONMENT THEMES — one accent triad + backdrop ramp per biome
   ========================================================================== */
[data-theme="neon"]      { --th-a:#00f0ff; --th-b:#ff2d75; --th-c:#9b6bff; --th-bg0:#05070f; --th-bg1:#101a36; --th-fog:rgba(0,240,255,0.07); }
[data-theme="factory"]   { --th-a:#ffb020; --th-b:#ff5a1f; --th-c:#7ea0c0; --th-bg0:#0b0906; --th-bg1:#241a10; --th-fog:rgba(255,176,32,0.07); }
[data-theme="crystal"]   { --th-a:#7cf9ff; --th-b:#b78bff; --th-c:#5ee6b0; --th-bg0:#050b12; --th-bg1:#0e2033; --th-fog:rgba(140,220,255,0.09); }
[data-theme="temple"]    { --th-a:#ffd479; --th-b:#c76a2a; --th-c:#8fbf6a; --th-bg0:#0d0a06; --th-bg1:#25190e; --th-fog:rgba(255,212,121,0.06); }
[data-theme="ice"]       { --th-a:#9fe8ff; --th-b:#4f8dff; --th-c:#dff6ff; --th-bg0:#050c14; --th-bg1:#13283f; --th-fog:rgba(180,235,255,0.10); }
[data-theme="lava"]      { --th-a:#ff6a1a; --th-b:#ffd12e; --th-c:#ff2d3d; --th-bg0:#110402; --th-bg1:#2e0c06; --th-fog:rgba(255,106,26,0.09); }
[data-theme="station"]   { --th-a:#7fd4ff; --th-b:#c9a6ff; --th-c:#dfe9ff; --th-bg0:#03050c; --th-bg1:#0a1024; --th-fog:rgba(150,190,255,0.06); }
[data-theme="jungle"]    { --th-a:#7cff5a; --th-b:#26d0a0; --th-c:#d7ff6b; --th-bg0:#030c07; --th-bg1:#0c2417; --th-fog:rgba(124,255,90,0.07); }
[data-theme="desert"]    { --th-a:#ffca63; --th-b:#ff8a3d; --th-c:#e4c79a; --th-bg0:#0d0904; --th-bg1:#2a1e0d; --th-fog:rgba(255,202,99,0.08); }
[data-theme="abyss"]     { --th-a:#37e0d0; --th-b:#2f7bff; --th-c:#8bf0ff; --th-bg0:#020a10; --th-bg1:#06202e; --th-fog:rgba(55,224,208,0.10); }

/* ==========================================================================
   GRAPHICS QUALITY TIERS — CSS side (canvas side handled in renderer.js)
   ========================================================================== */
.app[data-quality="low"]    { --glass-blur: 0px;  --fx-post: 0;   --fx-shadow: 0;   }
.app[data-quality="medium"] { --glass-blur: 6px;  --fx-post: 0.4; --fx-shadow: 0.5; }
.app[data-quality="high"]   { --glass-blur: 12px; --fx-post: 0.75;--fx-shadow: 0.8; }
.app[data-quality="ultra"]  { --glass-blur: 18px; --fx-post: 1;   --fx-shadow: 1;   }

/* ==========================================================================
   ACCESSIBILITY MODES
   ========================================================================== */
.app[data-contrast="high"] {
  --bg-panel:   rgba(2, 4, 10, 0.94);
  --bg-panel-2: rgba(2, 4, 10, 0.97);
  --line:       rgba(255, 255, 255, 0.55);
  --line-hi:    #ffffff;
  --tx:         #ffffff;
  --tx-dim:     #dfe8f5;
  --glass-blur: 0px;
}

.app[data-cb="protanopia"]   { --c-red:#f0a000; --c-magenta:#ffa100; --th-b:#ffa100; }
.app[data-cb="deuteranopia"] { --c-lime:#63c8ff; --th-c:#63c8ff; --c-magenta:#ff9d2e; }
.app[data-cb="tritanopia"]   { --c-cyan:#ff7ad9; --th-a:#ff7ad9; --c-amber:#ff5a6e; }

.app[data-motion="reduced"] { --motion: 0; --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-scene: 1ms; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-scene: 1ms; }
}

/* ==========================================================================
   RARITY / MEDAL TOKENS
   ========================================================================== */
:root {
  --rar-common:    #9fb2c9;
  --rar-rare:      #43b8ff;
  --rar-epic:      #b46bff;
  --rar-legend:    #ffb020;
  --rar-mythic:    #ff2d75;

  --medal-bronze:   #d08243;
  --medal-silver:   #cfdbe8;
  --medal-gold:     #ffcc3d;
  --medal-platinum: #7ff6ff;
}