:root {
  --sp-font-ui: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --sp-font-brand: "Neutral Face", "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  
  --font-ui: var(--sp-font-ui);
  --font-brand: var(--sp-font-brand);

  --sp-primary: #14908A;
  --sp-primary-dark: #152E3F;
  --sp-orange: #F07F03;
  --sp-orange-hover: #d66f03;
  --sp-coral: #F07F03;
  --sp-accent: var(--sp-orange);
  --sp-bg: #F8ECDC;
  --sp-surface: #FFFFFF;
  --sp-surface-2: #E7E8EB;

  --sp-success: #22c55e;
  --sp-warning: #eab133;
  --sp-danger: #e65a4f;
  --sp-info: #0ea5e9;
  
  --sp-text: var(--sp-primary-dark);
  --sp-text-muted: #6c757d;
  --sp-text-light: #9fb7af;
  
  --sp-border: var(--sp-surface-2);
  --sp-border-light: #D9DADD;
  --sp-shadow-sm: 0 2px 8px rgba(21, 46, 63, 0.08);
  --sp-shadow-md: 0 4px 16px rgba(21, 46, 63, 0.12);
  --sp-shadow-lg: 0 8px 32px rgba(21, 46, 63, 0.18);

  --sp-radius-sm: 6px;
  --sp-radius-md: 8px;
  --sp-radius-lg: 12px;
  --sp-radius-xl: 16px;

  --sp-spacing-xs: 4px;
  --sp-spacing-sm: 8px;
  --sp-spacing-md: 16px;
  --sp-spacing-lg: 24px;
  --sp-spacing-xl: 32px;

  --sp-transition-fast: 150ms ease;
  --sp-transition-normal: 250ms ease;
  --sp-transition-slow: 350ms ease;
}

:root[data-theme="dark"] {
  --sp-bg: #0a1a2e;
  --sp-surface: #0f1518;
  --sp-surface-2: #1a2332;
  --sp-text: #e5e7eb;
  --sp-text-muted: #9ca3af;
  --sp-text-light: #6b7280;
  --sp-border: #22313A;
  --sp-border-light: #2d3d4a;
  
  /* Dark theme variables for profile and other components */
  --sp-dark-bg: #0a1a2e;
  --sp-dark-surface: #1a2332;
  --sp-dark-text: #e5e7eb;
  --sp-dark-border: #22313A;
  --sp-dark-hover: rgba(255, 255, 255, 0.05);
}