:root {
  /* Colors - Engineering Palette */
  --color-bg: #0A0A0A;
  --color-surface: #111111;
  --color-text-main: #EDEDED;
  --color-text-muted: #888888;
  --color-accent-blue: #0070f3;
  --color-accent-purple: #7928ca;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-glow: rgba(0, 112, 243, 0.15);

  /* Spacing - 8px Grid */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem;   /* 8px */
  --space-s: 1rem;      /* 16px */
  --space-m: 1.5rem;    /* 24px */
  --space-l: 2rem;      /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --size-step--2: 0.75rem;
  --size-step--1: 0.875rem;
  --size-step-0: 1rem;
  --size-step-1: 1.25rem;
  --size-step-2: 1.5rem;
  --size-step-3: 2rem;
  --size-step-4: 2.5rem;
  --size-step-5: 3rem;
  --size-step-6: 4rem;

  /* Borders & Effects */
  --radius-s: 6px;
  --radius-m: 8px;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --border-thin: 1px solid var(--color-border);
}

@layer base, components, utilities;