/* ==========================================================================
   AUTO-GENERATED by scripts/build-tokens.js from tokens/tokens.json
   Do not edit by hand — change tokens.json and run `npm run build:tokens`.
   ========================================================================== */

/* ===== 1. DESIGN TOKENS: every color (UI + 3D scene) lives here only ===== */
:root {
  /* ---- 1a. Base palette: UI (raw values) */
  --c-mars-sky: #280e19;
  --c-mars-sky-glow: #2a1119;
  --c-signal: #fcf696;
  --c-signal-rgb: 252, 246, 150;
  --c-cream: #f2e9da;
  --c-dust: #c9a68c;
  --c-dome-frame-rgb: 155, 122, 113;
  --c-rock-rgb: 115, 40, 37;
  --c-ink: #1e120a;
  --c-night-rgb: 20, 8, 13;
  --c-black-rgb: 0, 0, 0;
  --c-white-rgb: 255, 255, 255;

  /* ---- 1b. Base palette: 3D scene (read by JS) */
  --scene-sky-zenith: #3a1018;
  --scene-sky-horizon: #d9622c;
  --scene-ground-near: #dbc49d;
  --scene-ground-far: #a64614;
  --scene-mountains: #35120f;
  --scene-light-ambient: #a8836b;
  --scene-light-hemi-sky: #d98a5a;
  --scene-light-hemi-ground: #2a1810;
  --scene-light-sun: #ffd9a0;
  --scene-spark: #fff2c9;

  /* ---- 1c. Semantic colors (use these in components) */
  --bg: var(--c-mars-sky);
  --text: var(--c-cream);
  --text-dim: var(--c-dust);
  --accent: var(--c-signal);
  --border-neutral: rgba(var(--c-dome-frame-rgb), 0.4);
  --surface-tint: rgba(var(--c-dome-frame-rgb), 0.14);
  --panel-bg: var(--c-ink);
  --panel-border: var(--c-signal);
  --overlay-bg: rgba(var(--c-night-rgb), 0.6);
  --error-bg: rgba(var(--c-rock-rgb), 0.85);
  --error-border: rgba(var(--c-rock-rgb), 0.9);
  --danger-hover-bg: rgba(var(--c-rock-rgb), 0.35);

  /* ---- 1d. Button tokens */
  --btn-primary-bg: var(--c-ink);
  --btn-primary-border: var(--c-signal);
  --btn-primary-text: var(--c-signal);
  --btn-primary-bg-hover: var(--c-signal);
  --btn-primary-text-hover: var(--c-ink);
  --btn-secondary-bg: var(--surface-tint);
  --btn-secondary-border: var(--border-neutral);
  --btn-secondary-text: var(--text);
  --btn-secondary-hover-accent: var(--accent);
  --btn-radius: 0;
  --btn-corner-image: url('../images/forge-core-button-container-edge.png');
  --btn-corner-width: 48px;
  --btn-corner-height: 28px;
  --btn-corner-offset: 0px;

  /* ---- 1e. Container tokens */
  --panel-padding: 20px;
  --panel-radius: 0;
  --sidebar-width: 320px;
  --sidebar-margin: 20px;
  --sidebar-space: calc(var(--sidebar-width) + var(--sidebar-margin) * 2);
  --sidebar-gap: 24px;
  --panel-corner-image: url('../images/forge-core-container-edge.png');
  --panel-corner-width: 40px;
  --panel-corner-height: 32px;
  --panel-corner-offset: 3px;

  /* ---- 1f. Effects */
  --blur-overlay: blur(4px);
  --shadow-panel: 0 8px 32px rgba(var(--c-black-rgb), 0.45), inset 0 1px 0 rgba(var(--c-white-rgb), 0.04);
  --shadow-toast: 0 8px 24px rgba(var(--c-black-rgb), 0.4);
  --glow-accent: 0 0 12px rgba(var(--c-signal-rgb), 0.5);
  --glow-active: 0 0 10px rgba(var(--c-signal-rgb), 0.3);

  /* ---- 1g. Typography */
  --font-mono: 'Courier New', monospace;
  --fs-display: 2.4rem;
  --fs-h1: 1.15rem;
  --fs-h2: 1.2rem;
  --fs-h3: 0.7rem;
  --fs-body: 0.8rem;
  --fs-small: 0.75rem;
  --fs-tiny: 0.68rem;
  --ls-label: 1.5px;
  --ls-heading: 2px;

  /* ---- 1h. Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 20px;

  /* ---- 1i. Radius */
  --radius-sm: 6px;
  --radius-pill: 999px;

  /* ---- 1j. Z-index */
  --z-canvas: 0;
  --z-panel: 10;
  --z-toast: 30;
  --z-modal: 50;
}

/* ---- Small screens: sidebar takes half the width */
@media (max-width: 760px) {
  :root {
    --panel-padding: 10px 12px;
    --sidebar-width: 50vw;
    --sidebar-gap: 16px;
    --sidebar-margin: 12px;
  }
}