:root {
  /* Spacing */
  --s-space-xs: 4px;
  --s-space-sm: 8px;
  --s-space-md: 16px;
  --s-space-lg: 24px;
  --s-space-xl: 32px;
  --s-space-2xl: 48px;
  --s-space-3xl: 64px;

  /* Typography */
  --s-font-display: 'Playfair Display', serif;
  --s-font-body: 'Inter', sans-serif;
  --s-font-mono: 'JetBrains Mono', monospace;

  /* Relay-specific overrides */
  --s-accent: #6366F1;
  --s-accent-warm: #818CF8;
  --s-accent-dim: rgba(99, 102, 241, 0.15);
  --s-accent-border: rgba(99, 102, 241, 0.3);
  --s-surface-base: #12121A;
  --s-surface-raised: #1A1A28;
  --s-surface-overlay: #22223A;
  --s-surface-hover: rgba(99, 102, 241, 0.08);

  /* Text */
  --s-text-primary: #E2E8F0;
  --s-text-secondary: #94A3B8;
  --s-text-muted: #64748B;
  --s-text-accent: #818CF8;

  /* Shell */
  --s-shell-height: 48px;

  /* Radius */
  --s-radius-sm: 4px;
  --s-radius-md: 8px;
  --s-radius-lg: 12px;
  --s-radius-xl: 16px;

  /* Borders */
  --s-border-subtle: rgba(255, 255, 255, 0.06);
  --s-border-default: rgba(255, 255, 255, 0.1);
  --s-border-accent: rgba(99, 102, 241, 0.4);

  /* Status */
  --s-status-pending: #F59E0B;
  --s-status-approved: #22C55E;
  --s-status-blocked: #EF4444;
  --s-status-info: #06B6D4;

  /* Motion */
  --s-transition-fast: 150ms ease;
  --s-transition-base: 250ms ease;
  --s-transition-slow: 400ms ease;

  /* Shadow */
  --s-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --s-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --s-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --s-shadow-accent: 0 4px 24px rgba(99, 102, 241, 0.25);
}