:root {
  /* Colors - Dark Theme from Design Specification */
  --eta-color-bg: #0F1115; /* shell background */
  --eta-color-surface: #151922; /* surface background */
  --eta-color-card: #1B2030; /* card background */
  --eta-color-border: #2A3244; /* borders */
  --eta-color-text-high: #F3F6FF; /* high contrast text */
  --eta-color-text-mid: #C6CEE3; /* medium contrast text */
  --eta-color-text-low: #93A1C6; /* low contrast text */
  --eta-color-primary: #5B8CFF; /* primary blue */
  --eta-color-success: #2ECC71; /* success green */
  --eta-color-warning: #F1C40F; /* warning yellow */
  --eta-color-danger: #E74C3C; /* danger red */

  /* Space scale - precise for header/nav */
  --eta-space-0: 0;
  --eta-space-1: 4px;
  --eta-space-2: 8px;
  --eta-space-3: 12px;
  --eta-space-4: 16px;
  --eta-space-5: 20px;
  --eta-space-6: 24px;
  --eta-space-7: 32px;
  --eta-space-8: 40px;
  --eta-space-9: 48px;
  --eta-space-10: 64px;

  /* Header specific */
  --eta-header-height: 64px;
  --eta-header-padding-x: 24px;
  --eta-nav-item-padding: 12px 16px;
  --eta-nav-item-gap: 8px;

  /* Container - from design specification */
  --eta-container-max-width: 1280px; /* max content width */
  --eta-container-padding: 16px; /* base spacing */

  /* Radii - from design specification */
  --eta-radius-sm: 4px; /* inputs */
  --eta-radius-md: 8px; /* cards */
  --eta-radius-lg: 8px; /* cards */
  --eta-radius-pill: 999px; /* pills */

  /* Typography - Inter font family */
  --eta-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --eta-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* Type scale - from design specification */
  --eta-type-h1: 32px; /* 32/40 line height */
  --eta-type-h2: 24px; /* 24/32 line height */
  --eta-type-h3: 20px; /* 20/28 line height */
  --eta-type-h4: 18px;
  --eta-type-body: 16px; /* base font size */
  --eta-type-small: 14px; /* 14/20 line height */
  --eta-type-caption: 12px; /* 12/16 line height */

  /* Font weights - Inter specific */
  --eta-font-normal: 400;
  --eta-font-medium: 500;
  --eta-font-bold: 700; /* headings use 700 */

  /* Shadows */
  --eta-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --eta-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --eta-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Z-index */
  --eta-z-header: 1000;
  --eta-z-drawer: 1100;
  --eta-z-modal: 1200;

  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}