:root {
  --bg: #0b0d0f;
  --panel: #0f1317;
  --panel-2: #0d1115;

  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);

  --fg: rgba(255, 255, 255, 0.88);
  --fg-muted: rgba(255, 255, 255, 0.62);
  --fg-dim: rgba(255, 255, 255, 0.42);

  --accent: #f59e0b;
  --accent-2: #d97706;
  --accent-fg: #0b0d0f;

  --radius-sm: 4px;
  --focus-ring: color-mix(in srgb, var(--accent) 45%, transparent);

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-16: 4rem;

  /* Desktop-focused spacing scale (baseline = 12px) */
  --space-scale-8: 8px;
  --space-scale-12: 12px;
  --space-scale-16: 16px;
  --space-scale-24: 24px;
  --space-base: var(--space-scale-12);

  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-size-sm: 0.9rem;
  --font-size-md: 1rem;
  --font-size-xl: 1.8rem;
  --font-line-height-tight: 1.2;

  --motion-duration-fast: 160ms;
  --motion-duration-base: 240ms;
  --motion-ease-standard: ease;

  --z-base: 0;
  --z-overlay: 10;
  --z-modal: 20;
  --overlay-backdrop: rgb(0 0 0 / 0.82);

  /* Layout (centrally adjustable grid) */
  --layout-header-height: 56px;
  --layout-gutter-x: var(--space-scale-16);
  --layout-gutter-y: var(--space-scale-16);
  --layout-gap: var(--space-scale-16);
  --layout-sidebar-width: 320px;
  --layout-panel-padding: var(--space-base);
  --layout-titlebar-clearance: var(--space-scale-8);
}

html[data-theme='terminal-amber'] {
  --bg: #0b0d0f;
  --panel: #0f1317;
  --panel-2: #0d1115;

  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);

  --fg: rgba(255, 255, 255, 0.88);
  --fg-muted: rgba(255, 255, 255, 0.62);
  --fg-dim: rgba(255, 255, 255, 0.42);

  --accent: #f59e0b;
  --accent-2: #d97706;
  --accent-fg: #0b0d0f;

  --radius-sm: 4px;
  --focus-ring: color-mix(in srgb, var(--accent) 45%, transparent);

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-16: 4rem;

  --space-scale-8: 8px;
  --space-scale-12: 12px;
  --space-scale-16: 16px;
  --space-scale-24: 24px;
  --space-base: var(--space-scale-12);

  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-size-sm: 0.9rem;
  --font-size-md: 1rem;
  --font-size-xl: 1.8rem;
  --font-line-height-tight: 1.2;

  --motion-duration-fast: 160ms;
  --motion-duration-base: 240ms;
  --motion-ease-standard: ease;

  --z-base: 0;
  --z-overlay: 10;
  --z-modal: 20;
  --overlay-backdrop: rgb(0 0 0 / 0.82);

  --layout-header-height: 56px;
  --layout-gutter-x: var(--space-scale-16);
  --layout-gutter-y: var(--space-scale-16);
  --layout-gap: var(--space-scale-16);
  --layout-sidebar-width: 320px;
  --layout-panel-padding: var(--space-base);
  --layout-titlebar-clearance: var(--space-scale-8);
}