:root {
  /* Colors — blue/indigo theme */
  --color-primary: #4355b9;
  --color-primary-light: #dde1f9;
  --color-primary-dark: #2b3a8f;
  --color-on-primary: #fff;

  --color-surface: #fdfbff;
  --color-surface-dim: #f0eff4;
  --color-surface-container: #e7e5ea;
  --color-on-surface: #1b1b1f;
  --color-on-surface-muted: #46464f;

  --color-error: #ba1a1a;
  --color-error-bg: #ffdad6;
  --color-success: #2e7d32;
  --color-success-bg: #c8e6c9;
  --color-warning: #f57f17;
  --color-warning-bg: #fff9c4;

  /* Available/Unavailable/Unknown */
  --color-available: #4caf50;
  --color-unavailable: #ef5350;
  --color-unknown: #9e9e9e;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Typography */
  --font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.1);
  --shadow-md: 0 2px 8px rgba(0,0,0,.12);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.15);

  /* Layout */
  --nav-width: 72px;
  --nav-width-expanded: 240px;
  --header-height: 56px;
  --max-content-width: 960px;
}