:root {
  --sm-color-primary: #FF5A1F;
  --sm-color-primary-hover: #E04B14;
  --sm-color-primary-light: #FF8A3D;
  --sm-color-primary-glow: rgba(255, 90, 31, 0.16);

  --sm-bg-canvas: #0B0B0D;
  --sm-bg-surface: #151518;
  --sm-bg-surface-elevated: #1C1C20;
  --sm-bg-surface-highlight: #232328;
  --sm-bg-input: #121214;

  --sm-text-primary: #FFFFFF;
  --sm-text-secondary: #A1A1AA;
  --sm-text-muted: #71717A;
  --sm-text-inverse: #0B0B0D;

  --sm-color-success: #10B981;
  --sm-color-success-glow: rgba(16, 185, 129, 0.16);
  --sm-color-warning: #F59E0B;
  --sm-color-danger: #EF4444;
  --sm-color-danger-glow: rgba(239, 68, 68, 0.16);
  --sm-color-info: #3B82F6;

  --sm-border-subtle: rgba(255, 255, 255, 0.08);
  --sm-border-light: rgba(255, 255, 255, 0.12);
  --sm-border-focus: #FF5A1F;

  --sm-gradient-primary: linear-gradient(135deg, #FF5A1F 0%, #FF8A3D 100%);
  --sm-gradient-glow: radial-gradient(circle, rgba(255, 90, 31, 0.12) 0%, rgba(11, 11, 13, 0) 70%);

  --sm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  
  --sm-text-xs: 0.75rem;
  --sm-text-sm: 0.875rem;
  --sm-text-base: 1rem;
  --sm-text-lg: 1.125rem;
  --sm-text-xl: 1.25rem;
  --sm-text-2xl: 1.5rem;
  --sm-text-3xl: 1.875rem;
  --sm-text-4xl: 2.25rem;
  --sm-text-5xl: 3rem;

  --sm-space-1: 0.25rem;
  --sm-space-2: 0.5rem;
  --sm-space-3: 0.75rem;
  --sm-space-4: 1rem;
  --sm-space-5: 1.25rem;
  --sm-space-6: 1.5rem;
  --sm-space-8: 2rem;
  --sm-space-10: 2.5rem;
  --sm-space-12: 3rem;
  --sm-space-16: 4rem;

  --sm-radius-sm: 6px;
  --sm-radius-md: 10px;
  --sm-radius-lg: 16px;
  --sm-radius-xl: 24px;
  --sm-radius-full: 9999px;

  --sm-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --sm-transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --sm-transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  --sm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --sm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
  --sm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6);
  --sm-shadow-glow: 0 0 24px var(--sm-color-primary-glow);

  --sm-container-width: 1200px;
  --sm-container-narrow: 840px;
  --sm-header-height: 72px;

  --sm-z-base: 1;
  --sm-z-elevated: 10;
  --sm-z-header: 100;
  --sm-z-modal-backdrop: 900;
  --sm-z-modal: 1000;
}