:root {
  /* Chromatic Anchors (90:10 Rule) */
  --base-h: 220;
  --base-s: 16%;
  --accent-h: calc(var(--base-h) - 182); /* ~38deg Amber */
  --accent-s: 92%;

  /* Stacking Luminance Budget (No Pure Black) */
  --surface-0: hsl(var(--base-h), var(--base-s), 6%);   /* Z0 Base Canvas (#0c0f14) */
  --surface-1: hsl(var(--base-h), var(--base-s), 10%);  /* Z1 Panel (#12171f) */
  --surface-2: hsl(var(--base-h), var(--base-s), 14%);  /* Z2 Card & Viewport (#19202b) */
  --surface-3: hsl(var(--base-h), var(--base-s), 19%);  /* Active / Hover / Secondary */
  --surface-4: hsl(var(--base-h), var(--base-s), 24%);  /* Elevated items */

  /* Controlled Typography (No Pure White) */
  --text-high: hsl(var(--base-h), 12%, 86%);
  --text-med:  hsl(var(--base-h), 10%, 58%);
  --text-low:  hsl(var(--base-h), 8%, 38%);

  /* 10% Bounded Focal Accent (Amber) */
  --focal-core: hsl(var(--accent-h), var(--accent-s), 52%);
  --focal-hover: hsl(var(--accent-h), var(--accent-s), 46%);
  --focal-glow: hsla(var(--accent-h), var(--accent-s), 52%, 0.25);
  --focal-dim:  hsla(var(--accent-h), var(--accent-s), 52%, 0.10);

  /* Status Indication (≤10% Visual Surface) */
  --status-online: #22c55e;
  --status-syncing: #f59e0b;
  --status-offline: #64748b;
  --status-error: #ef4444;

  /* Geometry & Borderless Depths */
  --edge-highlight: inset 0 1px 0 0 hsla(var(--base-h), 20%, 100%, 0.06);
  --depth-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --radius-base: 8px;
  --space-unit: 8px;

  /* Fonts */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}