:root {
  --orange-50: var(--sp-orange-50);
  --orange-100: var(--sp-orange-100);
  --orange-200: var(--sp-orange-200);
  --orange-300: var(--sp-orange-300);
  --orange-400: var(--sp-orange-400);
  --orange-500: var(--sp-orange-500);
  --orange-600: var(--sp-orange-600);
  --orange-700: var(--sp-orange-700);
  --orange-800: var(--sp-orange-800);
  --orange-900: var(--sp-orange-900);
  --orange-950: var(--sp-orange-950);

  --color-primary: var(--sp-color-primary);
  --color-primary-hover: var(--sp-color-primary-hover);
  --color-primary-dark: var(--sp-color-primary-dark);
  --color-primary-rgb: var(--sp-color-primary-rgb);
  --color-text-on-primary: var(--sp-color-text-on-primary);
  --color-background: var(--sp-color-bg);
  --color-surface: var(--sp-color-surface);
  --color-surface-elevated: var(--sp-color-surface-elevated);
  --color-surface-variant: var(--sp-color-surface-variant);
  --color-surface-dark: var(--sp-color-surface-dark);
  --color-surface-alt: var(--sp-color-surface-alt);
  --color-text: var(--sp-color-text);
  --color-text-primary: var(--sp-color-text-primary);
  --color-text-secondary: var(--sp-color-text-secondary);
  --color-text-muted: var(--sp-color-text-muted);
  --color-text-disabled: var(--sp-color-text-disabled);
  --color-border: var(--sp-color-border);
  --color-success: var(--sp-color-success);
  --color-warning: var(--sp-color-warning);
  --color-error: var(--sp-color-error);
  --color-info: var(--sp-color-info);

  --font-brand: var(--sp-font-brand);
  --font-body: var(--sp-font-sans);
  --font-heading: var(--sp-font-heading);
  --font-size-xs: var(--sp-text-xs);
  --font-size-sm: var(--sp-text-sm);
  --font-size-md: var(--sp-text-base);
  --font-size-lg: var(--sp-text-lg);
  --font-size-xl: var(--sp-text-xl);
  --font-size-xxl: var(--sp-text-2xl);
  --font-weight-regular: var(--sp-font-weight-regular);
  --font-weight-medium: var(--sp-font-weight-medium);
  --font-weight-semibold: var(--sp-font-weight-semibold);
  --font-weight-bold: var(--sp-font-weight-bold);

  --space-xs: var(--sp-space-1);
  --space-sm: var(--sp-space-2);
  --space-md: var(--sp-space-4);
  --space-lg: var(--sp-space-6);
  --space-xl: var(--sp-space-8);
  --space-2xl: var(--sp-space-12);
  --space-3xl: var(--sp-space-3xl);
  --space-4xl: var(--sp-space-4xl);
  --spacing-xs: var(--sp-space-1);
  --spacing-sm: var(--sp-space-2);
  --spacing-md: var(--sp-space-4);
  --spacing-lg: var(--sp-space-6);
  --spacing-xl: var(--sp-space-8);
  --spacing-xxl: var(--sp-space-12);

  --container-max: var(--sp-container-max);
  --header-height: var(--sp-header-height);
  --sidebar-left-width: var(--sp-sidebar-left-width);
  --sidebar-right-width: var(--sp-sidebar-right-width);

  --radius-xs: var(--sp-radius-xs);
  --radius-sm: var(--sp-radius-sm);
  --radius-md: var(--sp-radius-md);
  --radius-lg: var(--sp-radius-lg);
  --radius-xl: var(--sp-radius-xl);
  --radius-round: var(--sp-radius-full);

  --shadow-sm: var(--sp-shadow-sm);
  --shadow-md: var(--sp-shadow-md);
  --shadow-lg: var(--sp-shadow-lg);
  --shadow-xl: var(--sp-shadow-xl);

  --animation-fast: var(--sp-duration-fast);
  --animation-normal: var(--sp-duration-normal);
  --animation-slow: var(--sp-duration-slow);
  --transition-fast: var(--sp-transition-fast);
  --transition-normal: var(--sp-transition-normal);
  --transition-slow: var(--sp-transition-slow);

  --z-base: var(--sp-z-base);
  --z-sticky: var(--sp-z-sticky);
  --z-sticky-header: var(--sp-z-sticky-header);
  --z-dropdown: var(--sp-z-dropdown-menu);
  --z-panel: var(--sp-z-panel-overlay);
  --z-sidebar: var(--sp-z-sidebar-nav);
  --z-sidebar-toggle: var(--sp-z-sidebar-toggle);
  --z-sidebar-drawer: var(--sp-z-sidebar-drawer);
  --z-mobile-menu: var(--sp-z-mobile-menu);
  --z-navigation: var(--sp-z-header);
  --z-modal: var(--sp-z-modal);
  --sp-z-navigation: var(--sp-z-header);

  --terminal-dot-close: var(--sp-terminal-dot-close);
  --terminal-dot-minimize: var(--sp-terminal-dot-minimize);
  --terminal-dot-maximize: var(--sp-terminal-dot-maximize);
  --syntax-bg: var(--sp-syntax-bg);
  --syntax-fg: var(--sp-syntax-fg);
  --syntax-comment: var(--sp-syntax-comment);
  --syntax-keyword: var(--sp-syntax-keyword);
  --syntax-string: var(--sp-syntax-string);
  --syntax-number: var(--sp-syntax-number);
  --syntax-function: var(--sp-syntax-function);
  --syntax-variable: var(--sp-syntax-variable);
  --syntax-operator: var(--sp-syntax-operator);
  --syntax-class: var(--sp-syntax-class);
  --color-hero-bg: var(--sp-color-hero-bg);
  --color-mockup-chrome: var(--sp-color-mockup-chrome);
  --color-mockup-chrome-border: var(--sp-color-mockup-chrome-border);
  --color-chat-bubble-user: var(--sp-color-chat-bubble-user);
  --color-chat-bubble-ai: var(--sp-color-chat-bubble-ai);
  --color-chat-bubble-ai-border: var(--sp-color-chat-bubble-ai-border);
  --color-brand-pill-bg: var(--sp-color-brand-pill-bg);
  --color-header-bg: var(--sp-color-header-bg);
  --color-header-border: var(--sp-color-header-border);
  --color-mockup-bg: var(--sp-color-mockup-bg);
  --color-mockup-sidebar: var(--sp-color-mockup-sidebar);
  --color-mockup-border: var(--sp-color-mockup-border);
  --color-mockup-input: var(--sp-color-mockup-input);
  --color-mockup-badge: var(--sp-color-mockup-badge);
  --color-final-cta-gradient: var(--sp-color-final-cta-gradient);
  --color-hiw-step-number: var(--sp-color-hiw-step-number);
  --color-hiw-badge-bg: var(--sp-color-hiw-badge-bg);
  --color-hiw-nav-active-bg: var(--sp-color-hiw-nav-active-bg);
  --color-hiw-nav-active-text: var(--sp-color-hiw-nav-active-text);
  --color-hiw-warning-bg: var(--sp-color-hiw-warning-bg);
  --color-hiw-warning-border: var(--sp-color-hiw-warning-border);
  --color-hiw-warning-text: var(--sp-color-hiw-warning-text);
  --color-hiw-inline-code-bg: var(--sp-color-hiw-inline-code-bg);
  --color-hiw-sync-btn-bg: var(--sp-color-hiw-sync-btn-bg);
}

[data-theme="dark"] {
  color-scheme: dark;
  --shadow-sm: var(--sp-shadow-sm);
  --shadow-md: var(--sp-shadow-md);
  --shadow-lg: var(--sp-shadow-lg);
  --shadow-xl: var(--sp-shadow-xl);

  --syntax-bg: var(--sp-syntax-bg);
  --syntax-fg: var(--sp-syntax-fg);
  --syntax-comment: var(--sp-syntax-comment);
  --syntax-keyword: var(--sp-syntax-keyword);
  --syntax-string: var(--sp-syntax-string);
  --syntax-number: var(--sp-syntax-number);
  --syntax-function: var(--sp-syntax-function);
  --syntax-variable: var(--sp-syntax-variable);
  --syntax-operator: var(--sp-syntax-operator);
  --syntax-class: var(--sp-syntax-class);
  --color-hero-bg: var(--sp-color-hero-bg);
  --color-mockup-chrome: var(--sp-color-mockup-chrome);
  --color-mockup-chrome-border: var(--sp-color-mockup-chrome-border);
  --color-chat-bubble-user: var(--sp-color-chat-bubble-user);
  --color-chat-bubble-ai: var(--sp-color-chat-bubble-ai);
  --color-chat-bubble-ai-border: var(--sp-color-chat-bubble-ai-border);
  --color-brand-pill-bg: var(--sp-color-brand-pill-bg);
  --color-header-bg: var(--sp-color-header-bg);
  --color-header-border: var(--sp-color-header-border);
  --color-mockup-bg: var(--sp-color-mockup-bg);
  --color-mockup-sidebar: var(--sp-color-mockup-sidebar);
  --color-mockup-border: var(--sp-color-mockup-border);
  --color-mockup-input: var(--sp-color-mockup-input);
  --color-mockup-badge: var(--sp-color-mockup-badge);
  --color-final-cta-gradient: var(--sp-color-final-cta-gradient);
  --color-hiw-step-number: var(--sp-color-hiw-step-number);
  --color-hiw-badge-bg: var(--sp-color-hiw-badge-bg);
  --color-hiw-nav-active-bg: var(--sp-color-hiw-nav-active-bg);
  --color-hiw-nav-active-text: var(--sp-color-hiw-nav-active-text);
  --color-hiw-warning-bg: var(--sp-color-hiw-warning-bg);
  --color-hiw-warning-border: var(--sp-color-hiw-warning-border);
  --color-hiw-warning-text: var(--sp-color-hiw-warning-text);
  --color-hiw-inline-code-bg: var(--sp-color-hiw-inline-code-bg);
  --color-hiw-sync-btn-bg: var(--sp-color-hiw-sync-btn-bg);
}