:root {
  /* ============================================
     Surfaces — neutral scale, used in a layered way:
       canvas  : the page background behind everything
       surface : the main content area
       elevated: cards, accordions, popovers
       overlay : hover/pressed states
     ============================================ */
  --color-canvas: #0E1013;
  --color-surface: #15181D;
  --color-surface-elevated: #1B1F25;
  --color-surface-overlay: #232830;
  --color-surface-sunken: #0B0D10;

  /* Backwards-compatible aliases so existing CSS keeps working */
  --color-bg-main: var(--color-surface);
  --color-bg-secondary: var(--color-canvas);
  --color-bg-hover: var(--color-surface-overlay);
  --color-overlay: rgba(0, 0, 0, 0.65);

  /* ============================================
     Text — hierarchy: primary / secondary / muted / disabled
     ============================================ */
  --color-text: #E6E8EC;
  --color-text-strong: #FFFFFF;
  --color-text-secondary: #B4B9C2;
  --color-text-muted: #7C8290;
  --color-text-disabled: #4E535D;
  --color-text-error: #FF5C5C;
  --color-text-table-headers: #A1A6B0;

  /* ============================================
     Brand — Worknest teal. Used as accent only, never as bulk surface.
       brand    : primary action background
       brand-hover: hover state for primary actions
       brand-soft: tinted backgrounds (subtle), focus rings, selection
       brand-on  : text/icons on brand background
     ============================================ */
  --color-brand: #0A5A6C;
  --color-brand-hover: #0E768D;
  --color-brand-strong: #75B4C9;
  --color-brand-soft: rgba(117, 180, 201, 0.12);
  --color-brand-soft-strong: rgba(117, 180, 201, 0.22);
  --color-brand-on: #FFFFFF;
  --color-brand-ring: rgba(117, 180, 201, 0.45);

  --color-accent: var(--color-brand);
  --color-accent-hover: var(--color-brand-strong);
  --non-nav-icons: #599AAD;
  --nav-icons: #75B4C9;

  /* ============================================
     Borders — three levels of visual weight
     ============================================ */
  --color-border: #2A2F38;
  --color-border-strong: #3A414C;
  --color-border-muted: #21262D;
  --color-border-darker: #21262D;

  /* ============================================
     Semantic — danger / warning / success / info
     ============================================ */
  --color-danger: #E5484D;
  --color-danger-hover: #FF6369;
  --color-danger-soft: rgba(229, 72, 77, 0.14);
  --color-danger-ring: rgba(229, 72, 77, 0.45);

  --color-warning: #FFB224;
  --color-warning-hover: #FFC53D;
  --color-warning-soft: rgba(255, 178, 36, 0.14);

  --color-success: #30A46C;
  --color-success-hover: #46C190;
  --color-success-soft: rgba(48, 164, 108, 0.14);

  --color-info: #5B7CFA;
  --color-info-soft: rgba(91, 124, 250, 0.14);

  /* Toast colours */
  --toast-success-bg: #1E3A2B;
  --toast-success-border: #30A46C;
  --toast-text-color: var(--color-text);
  --toast-error-bg: #3A1E20;
  --toast-error-border: #E5484D;

  /* Disabled state */
  --disabled-button: #2A2F38;
  --disabled-button-text: #5A6172;

  /* ============================================
     VM status — refined for dark theme
     ============================================ */
  --color-status-running: #46C190;
  --color-status-stopped: #E5484D;
  --color-status-pending: #FFB224;
  --color-status-shutting-down: #FF8B3D;
  --color-status-terminated: #6E7480;

  /* ============================================
     Typography — system stack, no external loads.
     Scale follows a 1.125 / 1.2 ratio (major second / minor third).
     ============================================ */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
                      "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-family-mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono",
                      monospace;
  --font-family-material-icons: 'Material Symbols Outlined';

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;

  /* ============================================
     Spacing — 4px base scale
     ============================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --gap-small: var(--space-2);
  --gap-default: var(--space-5);

  /* ============================================
     Radii — refined scale
     ============================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border-radius: var(--radius-md);
  --accordion-border-radius: var(--radius-md);

  /* ============================================
     Elevation — subtle, dark-theme appropriate
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 3px var(--color-brand-ring);
  --shadow-focus-danger: 0 0 0 3px var(--color-danger-ring);

  /* ============================================
     Motion — fast, ease-out cubic
     ============================================ */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-medium: var(--duration-normal) var(--ease-out);

  /* ============================================
     Layout
     ============================================ */
  --nav-width: 232px;
  --height-nav-item: 40px;
  --content-max-width: 1400px;

  /* Accordion specific */
  --accordion-bg-default: var(--color-surface-elevated);
  --accordion-bg-hover: var(--color-surface-overlay);

  /* Modal */
  --modal-width: min(560px, 92vw);
  --modal-height: auto;
  --modal-shadow: var(--shadow-lg);

  /* Auth */
  --auth-container-colour: var(--color-surface-elevated);
}