:root {
  /* ─── Colors ─── */
  --color-bg:               #0E0E0E;
  --color-surface:          #1A1A1A;
  --color-surface-elevated: #252525;
  --color-surface-deep:     #121212;
  --color-surface-input:    #1E1E1E;
  --color-surface-dim:      #151515;
  --color-border:           #2A2A2A;
  --color-border-subtle:    #353535;
  --color-text:             #F3F4F6;
  --color-text-muted:       #9CA3AF;
  --color-text-secondary:   #99A1AF;
  --color-text-dim:         #6A7282;
  --color-text-disabled:    #4A5565;
  --color-text-light:       #D1D5DC;
  --color-text-input:       #E5E7EB;
  --color-accent:           #FF5D18;
  --color-accent-hover:     #E04D10;
  --color-accent-glow:      rgba(255, 93, 24, 0.30);
  --color-accent-glow-hover:rgba(255, 93, 24, 0.40);
  --color-accent-bg:        rgba(255, 93, 24, 0.10);
  --color-success:          #22C55E;
  --color-success-bg:       rgba(34, 197, 94, 0.10);
  --color-warning:          #F59E0B;
  --color-warning-bg:       rgba(245, 158, 11, 0.10);
  --color-error:            #EF4444;
  --color-error-bg:         rgba(239, 68, 68, 0.10);
  --color-error-hover:      #F87171;

  /* ─── Typography ─── */
  --font-sans: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --text-h1:      28px;
  --text-h2:      22px;
  --text-h3:      16px;
  --text-body:    14px;
  --text-small:   12px;
  --text-caption:  10px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --lh-h1:      34px;
  --lh-h2:      28px;
  --lh-h3:      22px;
  --lh-body:    20px;
  --lh-small:   16px;
  --lh-caption: 14px;

  /* ─── Spacing ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* ─── Radius ─── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0px 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0px 8px 32px rgba(0, 0, 0, 0.50);
  --shadow-accent: 0px 0px 12px rgba(255, 93, 24, 0.30);
  --shadow-accent-hover: 0px 0px 16px rgba(255, 93, 24, 0.40);

  /* ─── Focus ring ─── */
  --focus-ring: 0px 0px 0px 2px rgba(255, 93, 24, 0.15);
  --focus-border: rgba(255, 93, 24, 0.60);
}