/* SuperWXR design tokens — the FastShaders token system, verbatim
   (FastShaders src/styles/tokens.css, v0.3.43), except the shadows: FastShaders
   casts a hard down-right offset under every plate, and here the boxes cast none.
   The flat "technical" style: every corner SQUARE, one 28px control height, one 12px chrome text size. Dark is a
   deliberate MID-grey ramp, and SuperWXR defaults to it (a 3D editor); light
   is `data-theme="light"` on <html>. */

:root {
  color-scheme: light;

  /* ===== DATA TYPE COLORS — theme-invariant ===== */
  --type-float: #3366CC;
  --type-int: #20B2AA;
  --type-vec2: #4A90E2;
  --type-vec3: #E040FB;
  --type-vec4: #AB47BC;
  --type-color: #E8A317;
  --type-any: #607D8B;
  --cost-high: #FF5722;

  /* ===== BACKGROUNDS (light) ===== */
  --bg-app: #F5F5F5;
  --bg-panel: #FFFFFF;
  --bg-surface: #FAFAFA;
  --bg-surface-hover: #F0F0F0;
  --bg-input: #FFFFFF;
  --bg-overlay: rgba(0, 0, 0, 0.3);
  /* chrome sitting ON the 3D canvas (panels, pills, bars) */
  --bg-raised: var(--bg-panel);
  --bg-raised-sub: var(--bg-surface);
  --node-bg: #F1F2F3;
  --node-ink-rgb: 0, 0, 0;
  --node-plate: #ffffff;

  /* ===== BORDERS — every corner square ===== */
  --border-subtle: #E0E0E0;
  --border-default: #CCCCCC;
  --border-strong: #999999;
  --border-focus: #3366CC;
  --border-radius-sm: 0;
  --border-radius-md: 0;
  --border-radius-lg: 0;

  /* ===== TEXT ===== */
  --text-primary: #1A1A1A;
  --text-secondary: #555555;
  --text-muted: #999999;
  --text-accent: #3366CC;
  --code-node-highlight: #3366CC;

  /* ===== SHADOWS — hard offset, zero blur, x == y; distance = elevation ===== */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-float-color: transparent;
  --shadow-float: none;
  --shadow-node: none;
  --shadow-node-selected: none;
  --shadow-node-control-hover: none;
  --fs-node-grow: 1.02;

  /* ===== TYPOGRAPHY — the scale STOPS at md ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;

  /* ===== SPACING ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ===== SEAMS (window dividers) ===== */
  --edge-color: var(--border-strong);
  --fs-seam: 2px;
  --fs-seam-hit: 10px;

  /* ===== ONE chrome control height ===== */
  --ctl-size: 28px;
  --handle-size: 10px;
  --handle-border: 2px;

  /* ===== MOTION ===== */
  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;

  /* ===== Z-INDEX — chrome layers only ===== */
  --z-controls: 10;
  --z-menu: 100;
  --z-overlay: 1000;
  --z-tooltip: 10000;

  /* ===== SuperWXR additions (FastShaders keeps these as per-site literals; the values are its) ===== */
  --danger: #d92d20;
  --danger-hover: #b42318;
  --danger-text: #b42318;
  --menu-danger: #c0392b;
  --success-text: #1a7f37;
  --play: #1f9d45;
  --axis-x: #d9363e;
  --axis-y: #3f9e3f;
  --axis-z: #2f6fde;
  --yes-bg: #cdeab0;
  --yes-border: #8fbf5e;
  --yes-bg-hover: #bce197;
  --yes-border-hover: #6fa63e;
  --draw-accent: #2b6cff;
  --accent-text: var(--text-accent);
  --viewport-bg: #FAFAFA;
}

/* ===== DARK — the mid-grey ramp: app (recessed) < surface < panel (raised) ===== */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg-app: #33363b;
  --bg-panel: #464a51;
  --bg-surface: #3c4046;
  --bg-surface-hover: #51565d;
  --bg-input: #2e3136;
  --node-bg: #2b2e34;
  --node-ink-rgb: 236, 238, 240;
  --node-plate: #3a3e45;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-raised: #4e535b;
  --bg-raised-sub: #454a52;
  --border-subtle: #545862;
  --border-default: #696e77;
  --border-strong: #868c96;
  --text-primary: #eceef0;
  --text-secondary: #c0c5cc;
  --text-muted: #9aa1aa;
  --code-node-highlight: #6f9cff;
  /* NOT redefined on purpose: --type-*, --cost-high, --border-focus, --text-accent, --shadow-node(-selected) */
  --danger: #e5484d;
  --danger-hover: #f2555a;
  --danger-text: #ff7b72;
  --menu-danger: #ff6b5e;
  --success-text: #3fb950;
  --accent-text: #9dbdff;
  --viewport-bg: #41454d;
}

/* ===== TOUCH / COARSE POINTER ===== */
@media (pointer: coarse) {
  :root {
    --handle-size: 12px;
    --fs-seam: 6px;
    --fs-seam-hit: 28px;
  }
}