:root {
  --sp-color-primary: hsl(28, 91%, 50%);
  --sp-color-primary-hover: hsl(28, 91%, 55%);
  --sp-color-primary-dark: hsl(28, 91%, 40%);
  --sp-color-primary-rgb: 243, 131, 24;
  --sp-color-text-on-primary: #ffffff;
  --sp-color-bg: #ffffff;
  --sp-color-surface: #FAFAF9;
  --sp-color-surface-elevated: #ffffff;
  --sp-color-surface-variant: #F5F5F4;
  --sp-color-surface-dark: #E7E5E4;
  --sp-color-surface-alt: #F9F8F7;
  --sp-color-text: #1C1917;
  --sp-color-text-primary: #1C1917;
  --sp-color-text-secondary: #57534E;
  --sp-color-text-muted: #78716C;
  --sp-color-text-disabled: #A8A29E;
  --sp-color-border: #E7E5E4;
  --sp-color-success: #22c55e;
  --sp-color-warning: #fbbf24;
  --sp-color-error: #ef4444;
  --sp-color-info: #3b82f6;

  --sp-orange-50: hsl(28, 91%, 95%);
  --sp-orange-100: hsl(28, 91%, 90%);
  --sp-orange-200: hsl(28, 91%, 80%);
  --sp-orange-300: hsl(28, 91%, 70%);
  --sp-orange-400: hsl(28, 91%, 65%);
  --sp-orange-500: hsl(28, 91%, 60%);
  --sp-orange-600: hsl(28, 91%, 50%);
  --sp-orange-700: hsl(28, 91%, 40%);
  --sp-orange-800: hsl(28, 91%, 30%);
  --sp-orange-900: hsl(28, 91%, 20%);
  --sp-orange-950: hsl(28, 91%, 10%);

  --sp-font-sans: "OpenSans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sp-font-heading: "Inter", system-ui, sans-serif;
  --sp-font-brand: "Inter", system-ui, sans-serif;
  --sp-font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;

  --sp-text-xs: 0.75rem;
  --sp-text-sm: 0.875rem;
  --sp-text-base: 0.9375rem;
  --sp-text-lg: 1.125rem;
  --sp-text-xl: 1.25rem;
  --sp-text-2xl: 1.75rem;

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

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

  --sp-radius-xs: 0.125rem;
  --sp-radius-sm: 0.25rem;
  --sp-radius-md: 0.5rem;
  --sp-radius-lg: 0.75rem;
  --sp-radius-xl: 1rem;
  --sp-radius-full: 9999px;

  --sp-shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.04), 0 1px 2px rgba(28, 25, 23, 0.06);
  --sp-shadow-md: 0 4px 6px rgba(28, 25, 23, 0.04), 0 2px 4px rgba(28, 25, 23, 0.06);
  --sp-shadow-lg: 0 10px 25px rgba(28, 25, 23, 0.06), 0 4px 10px rgba(28, 25, 23, 0.04);
  --sp-shadow-xl: 0 20px 40px rgba(28, 25, 23, 0.08), 0 8px 16px rgba(28, 25, 23, 0.04);

  --sp-z-base: 1;
  --sp-z-sticky: 10;
  --sp-z-header: 100;
  --sp-z-dropdown: 200;
  --sp-z-sidebar: 300;
  --sp-z-panel: 400;
  --sp-z-modal: 500;
  --sp-z-toast: 600;
  --sp-z-sticky-header: 20;
  --sp-z-dropdown-menu: 30;
  --sp-z-panel-overlay: 40;
  --sp-z-sidebar-nav: 50;
  --sp-z-sidebar-toggle: 60;
  --sp-z-sidebar-drawer: 70;
  --sp-z-mobile-menu: 99;

  --sp-color-brand-linkedin: #0A66C2;
  --sp-color-brand-twitter: #000000;
  --sp-color-brand-substack: #FF6719;
  --sp-color-brand-whatsapp: #25D366;

  --sp-color-accent-blue: #60a5fa;
  --sp-color-accent-purple: #c084fc;
  --sp-color-accent-green: #4ade80;
  --sp-color-accent-pink: #f472b6;
  --sp-color-accent-cyan: #22d3ee;

  --sp-color-terminal-bg: #1a1a1a;
  --sp-color-terminal-header: #2a2a2a;
  --sp-color-terminal-border: #333333;
  --sp-color-terminal-text: #ffffff;
  --sp-color-terminal-text-dim: #a0a0a0;

  --sp-duration-fast: 150ms;
  --sp-duration-normal: 300ms;
  --sp-duration-slow: 500ms;
  --sp-transition-fast: 150ms ease;
  --sp-transition-normal: 250ms ease;
  --sp-transition-slow: 400ms ease;

  --sp-container-max: 1200px;
  --sp-header-height: 4.5rem;
  --sp-sidebar-left-width: 280px;
  --sp-sidebar-right-width: 220px;

  --sp-bp-sm: 40rem;
  --sp-bp-md: 48rem;
  --sp-bp-lg: 64rem;
  --sp-bp-xl: 80rem;
}

[data-theme="dark"] {
  color-scheme: dark;
  --sp-color-primary: hsl(28, 91%, 55%);
  --sp-color-primary-hover: hsl(28, 91%, 60%);
  --sp-color-primary-dark: hsl(28, 91%, 45%);
  --sp-color-primary-rgb: 243, 152, 56;
  --sp-color-bg: #1C1917;
  --sp-color-surface: #292524;
  --sp-color-surface-elevated: #292524;
  --sp-color-surface-variant: #44403C;
  --sp-color-surface-dark: #57534E;
  --sp-color-surface-alt: #292524;
  --sp-color-text: #FAFAF9;
  --sp-color-text-primary: #FAFAF9;
  --sp-color-text-secondary: #D6D3D1;
  --sp-color-text-muted: #A8A29E;
  --sp-color-text-disabled: #57534E;
  --sp-color-border: #44403C;
  --sp-color-success: #34D399;
  --sp-color-warning: #FBBF24;
  --sp-color-error: #F87171;
  --sp-color-info: #60A5FA;
  --sp-orange-50: hsl(28, 91%, 10%);
  --sp-orange-100: hsl(28, 91%, 15%);
  --sp-orange-200: hsl(28, 91%, 25%);
  --sp-orange-300: hsl(28, 91%, 35%);
  --sp-orange-400: hsl(28, 91%, 50%);
  --sp-orange-500: hsl(28, 91%, 55%);
  --sp-orange-600: hsl(28, 91%, 60%);
  --sp-orange-700: hsl(28, 91%, 70%);
  --sp-orange-800: hsl(28, 91%, 80%);
  --sp-orange-900: hsl(28, 91%, 90%);
  --sp-orange-950: hsl(28, 91%, 95%);
  --sp-color-accent-blue: #93bbfd;
  --sp-color-accent-purple: #d4b5fd;
  --sp-color-accent-green: #86efac;
  --sp-color-accent-pink: #f9a8d4;
  --sp-color-accent-cyan: #67e8f9;
  --sp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --sp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --sp-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
  --sp-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
}