:root {
  /* Color */
  --color-canvas:         #050505;
  --color-surface:        rgba(255, 255, 255, 0.04);
  --color-surface-raised: rgba(255, 255, 255, 0.07);
  --color-ink:            #E8E8E8;
  --color-ink-muted:      #888888;
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-accent:         #D4A853;
  --color-accent-glow:    rgba(212, 168, 83, 0.25);
  --color-accent-focus:   rgba(212, 168, 83, 0.12);
  --color-error:          rgba(220, 80, 80, 0.8);
  --color-error-text:     rgba(255, 200, 200, 0.9);
  --color-error-subtle:   rgba(220, 80, 80, 0.08);
  --color-error-border:   rgba(220, 80, 80, 0.2);

  /* Typography */
  --font-display: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-body:    'Geist Sans', 'DM Sans', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Scale */
  --text-display: clamp(2.5rem, 5vw, 5rem);
  --text-h1:      clamp(1.75rem, 3vw, 2.5rem);
  --text-h2:      1.5rem;
  --text-h3:      1.125rem;
  --text-body:    1rem;
  --text-small:   0.8125rem;

  /* Spacing */
  --space-section: clamp(4rem, 8vw, 8rem);
  --space-card:    2rem;
  --space-xs:      0.375rem;
  --space-sm:      0.625rem;
  --space-md:      1.25rem;
  --space-lg:      3rem;
  --space-2xs:     0.5rem;
  --space-card-y:  0.75rem;
  --space-card-x:  1rem;
  --space-xl:      4rem;
  --max-width:     72rem;
  --max-prose:     44rem;

  /* Radius */
  --radius-card:   16px;
  --radius-inner:  12px;
  --radius-button: 8px;
  --radius-field:  8px;

  /* Shadows */
  --shadow-card:     0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-accent:   0 8px 24px rgba(212, 168, 83, 0.25);

  /* Motion */
  --ease-default:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
}