/* --- Pre-JS foundation ---
 * Only styles that must exist before JavaScript runs.
 * Everything else lives in style elements (ui-styles.js).
 */

:root {
  /* --- Status (OKLCH) --- */
  --accent: oklch(0.70 0.17 250);
  --accent-20: oklch(0.70 0.17 250 / 0.2);
  --accent-40: oklch(0.70 0.17 250 / 0.4);
  --green: oklch(0.75 0.18 155);
  --red: oklch(0.65 0.22 25);
  --amber: oklch(0.80 0.16 85);
  --danger-bg: oklch(0.65 0.22 25 / 0.12);

  /* --- Opacity scale (canvas overlays on mixed backgrounds) --- */
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-60: rgba(255, 255, 255, 0.6);
  --black-60: rgba(0, 0, 0, 0.6);

  /* --- Fonts --- */
  --font-sans: -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  /* --- Z-index (overlay only — all others in ui-constants.js) --- */
  --z-overlay: 1000;

  /* --- Transitions --- */
  --transition-normal: 0.15s;


  /* --- Typography & spacing: computed from baseMM() by syncCSSProperties() ---
   * --text-xs .. --text-xl, --space-xs .. --space-xl, --u-button, --u-gap,
   * --u-padding, --u-margin are set by JS before first paint.
   * One base unit, one set of ratios. Drift is structurally impossible. */
}

/* --- Base / Reset --- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: oklch(0.22 0.006 265);
  color: oklch(0.88 0 0);
  font-family: var(--font-sans);
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#canvas-root {
  --canvas-text: oklch(1 0 0);
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-image: radial-gradient(circle, var(--white-15) 1px, transparent 1px);
  background-size: 20px 20px;
  cursor: default;
  touch-action: none;
}

@media (prefers-color-scheme: light) {
  html, body { background: oklch(0.96 0.006 265); }
  #canvas-root {
    --canvas-text: oklch(0 0 0);
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
  }
}