/* Enterprise Infrastructure Design Tokens from DESIGN.md */
:root {
  /* Surface & Container Colors */
  --color-surface: #faf8ff;
  --color-surface-dim: #d5d9ee;
  --color-surface-bright: #faf8ff;
  --color-surface-lowest: #ffffff;
  --color-surface-low: #f2f3ff;
  --color-surface-container: #eaedff;
  --color-surface-high: #e3e7fc;
  --color-surface-highest: #dee2f6;
  --color-surface-subtle: #f6f6f6;
  --color-surface-tint: #e9effb;

  /* Text & Border Colors */
  --color-on-surface: #161b2a;
  --color-on-surface-variant: #444651;
  --color-neutral-slate: #202534;
  --color-outline: #757682;
  --color-outline-variant: #c5c6d3;
  --color-border-subtle: rgba(69, 95, 171, 0.12);
  --color-border-active: #455fab;

  /* Primary Brand - Technical Cobalt */
  --color-primary: #2b4791;
  --color-primary-brand: #455fab;
  --color-primary-hover: #364c88;
  --color-primary-container: #455fab;
  --color-on-primary: #ffffff;
  --color-primary-fixed: #dbe1ff;
  --color-on-primary-fixed: #00174c;

  /* Secondary - Ice Blue Accents */
  --color-secondary: #48607e;
  --color-secondary-ice: #abc4e6;
  --color-secondary-container: #c3dcff;
  --color-on-secondary: #ffffff;

  /* Status & Storage Visual Distribution */
  --color-usable: #2563eb;
  --color-usable-bg: rgba(37, 99, 235, 0.12);
  --color-protection: #ea580c;
  --color-protection-bg: rgba(234, 88, 12, 0.12);
  --color-unused: #64748b;
  --color-unused-bg: rgba(100, 116, 139, 0.12);
  --color-spare: #7c3aed;
  --color-spare-bg: rgba(124, 58, 237, 0.12);

  /* Hardware Status LEDs */
  --color-led-online: #10b981;
  --color-led-spare: #f59e0b;
  --color-led-warning: #ba1a1a;
  --color-led-empty: #94a3b8;

  /* Error & Alerts */
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;

  /* Typography */
  --font-headline: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', "SFMono-Regular", Consolas, Menlo, monospace;

  /* Spacing Grid (8pt baseline) */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* Borders & Radius (Disciplined industrial soft: 4px base, 8px cards) */
  --radius-sm: 0.125rem; /* 2px */
  --radius-base: 0.25rem;/* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem;   /* 8px */
  --radius-xl: 0.75rem;  /* 12px */
  --radius-full: 9999px;

  /* Elevation Shadows (Technical Hardware Tiers) */
  --shadow-card: 0 2px 8px -1px rgba(69, 95, 171, 0.08);
  --shadow-raised: 0 8px 24px -4px rgba(69, 95, 171, 0.12);
  --shadow-subtle: 0 1px 3px rgba(22, 27, 42, 0.05);

  /* Layout */
  --container-max: 84rem; /* 1344px */
  --gutter-desktop: 1.5rem;
  --gutter-mobile: 1rem;
}

/* ============================================================
   DARK MODE TOKEN OVERRIDES (Enterprise Datacenter Theme)
   ============================================================ */
[data-theme="dark"] {
  /* Dark Surface & Backgrounds */
  --color-surface: #0a0d14;
  --color-surface-dim: #111622;
  --color-surface-bright: #1b2234;
  --color-surface-lowest: #0e1320;
  --color-surface-low: #131826;
  --color-surface-container: #192033;
  --color-surface-high: #212a42;
  --color-surface-highest: #283452;
  --color-surface-subtle: #121725;
  --color-surface-tint: #1a2238;

  /* Text & Border Colors */
  --color-on-surface: #f1f5f9;
  --color-on-surface-variant: #94a3b8;
  --color-neutral-slate: #0a0d14;
  --color-outline: #64748b;
  --color-outline-variant: #252e42;
  --color-border-subtle: rgba(148, 163, 184, 0.12);
  --color-border-active: #60a5fa;

  /* Primary Brand - Technical Cobalt */
  --color-primary: #3b82f6;
  --color-primary-brand: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-container: #1e3a8a;
  --color-on-primary: #ffffff;
  --color-primary-fixed: #1e293b;
  --color-on-primary-fixed: #dbeafe;

  /* Secondary - Ice Blue Accents */
  --color-secondary: #94a3b8;
  --color-secondary-ice: #475569;
  --color-secondary-container: #1e293b;
  --color-on-secondary: #ffffff;

  /* Elevation Shadows (Dark Datacenter Tiers) */
  --shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.55);
  --shadow-raised: 0 10px 30px -4px rgba(0, 0, 0, 0.75);
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.45);
}