:root {
  /* Color tokens */
  --color-charcoal: #121417;
  --color-charcoal-2: #1a1d22;
  --color-charcoal-3: #23272e;
  --color-steel: #c8ccd1;
  --color-steel-dim: #8a9099;
  --color-steel-muted: #5c6169;
  --color-accent: #ff6a1f;
  --color-accent-dim: #c24d10;
  --color-text: #e8ebf0;
  --color-text-dim: #a2a8b0;
  --color-border: rgba(200, 204, 209, 0.1);
  --color-border-strong: rgba(200, 204, 209, 0.2);

  /* Spacing scale */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.5rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;

  /* Type scale */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.5rem;
  --font-size-3xl: 3.5rem;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 200ms var(--ease);
  --transition-med: 300ms var(--ease);
  --transition-slow: 400ms var(--ease);

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
}