:root {
  --sf-bg: #000000;
  --sf-surface: #000000;
  --sf-surface-2: #0f0f0f;
  --sf-card-bg: #000000;
  --sf-card-border: rgba(59,130,246,0.22);
  --sf-card-hover: rgba(96,165,250,0.38);
  --sf-section-bg: #000000;
  --sf-hero-bg: #000000;
  --sf-text: #f0f6ff;
  --sf-text-muted: #8ba3c7;
  --sf-primary: #3b82f6;
  --sf-accent: #60a5fa;
  --sf-glow: #93c5fd;
  --sf-success: #34d399;
  --sf-premium: #f59e0b;
  --sf-error: #ef4444;
  --sf-commerce-await: #f59e0b;
  --sf-commerce-pending: #3b82f6;
  --sf-commerce-danger: #ef4444;
  --sf-commerce-destructive: #ef4444;
  --sf-price: #60a5fa;
  --sf-heading-color: #f0f6ff;
  --sf-product-name: #f0f6ff;
  --sf-product-description: #8ba3c7;
  --sf-border: rgba(255,255,255,0.06);
  --sf-border-hover: rgba(255,255,255,0.12);
  --sf-glass: rgba(0,0,0,0.72);
  --sf-hero-overlay: #000000;
  --sf-hero-overlay-opacity: 0.82;
  --sf-glow-intensity: 8;
  --sf-glass-level: 2;
  --sf-btn-primary-from: #3b82f6;
  --sf-btn-primary-to: #60a5fa;
  --sf-btn-secondary-bg: rgba(255,255,255,0.06);
  --sf-btn-secondary-border: rgba(255,255,255,0.12);
  --sf-btn-secondary-hover: rgba(255,255,255,0.1);
  --sf-glass-blur: 14px;
  --sf-glow-strength: 0.08;
  --sf-shadow-glow: 0 0 40px color-mix(in srgb, var(--sf-primary) calc(var(--sf-glow-strength) * 100%), transparent);
  --sf-surface-base: #000000;
  --sf-surface-raised: #000000;
  --sf-surface-overlay: #0f0f0f;
  --sf-surface-card: #000000;
  --sf-surface-section: #000000;
  --sf-text-primary: #f0f6ff;
  --sf-text-secondary: #8ba3c7;
  --sf-text-tertiary: rgba(240,246,255,0.60);
  --sf-text-on-accent: #ffffff;
  --sf-interactive-rest: #3b82f6;
  --sf-interactive-hover: #60a5fa;
  --sf-interactive-active: #3b82f6;
  --sf-interactive-focus-ring: rgba(59,130,246,0.45);
  --sf-border-subtle: rgba(255,255,255,0.06);
  --sf-border-default: rgba(59,130,246,0.22);
  --sf-border-strong: rgba(255,255,255,0.12);
  --sf-border-focus: rgba(59,130,246,0.50);
  --sf-radius-xs: 6px;
  --sf-radius-sm: 8px;
  --sf-radius-md: 12px;
  --sf-radius-lg: 18px;
  --sf-radius-xl: 24px;
  --sf-radius-card: 18px;
  --sf-radius-button: 12px;
  --sf-radius-pill: 999px;
  --sf-motion-duration-fast: 160ms;
  --sf-motion-duration-base: 240ms;
  --sf-motion-duration-slow: 360ms;
  --sf-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sf-motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --sf-transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --sf-transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --sf-transition-slow: 360ms cubic-bezier(0.2, 0, 0, 1);
  --sf-density-space-unit: 1.0;
  --sf-density-card-padding: 1.15rem;
  --sf-density-section-gap: 2rem;
  --sf-font-size-xs: 0.720rem;
  --sf-font-size-sm: 0.860rem;
  --sf-font-size-base: 1.000rem;
  --sf-font-size-lg: 1.150rem;
  --sf-font-size-xl: 1.350rem;
  --sf-font-size-2xl: 1.700rem;
  --sf-font-size-3xl: 2.150rem;
  --sf-line-height-tight: 1.25;
  --sf-line-height-base: 1.65;
  --sf-line-height-loose: 1.85;
  --sf-font-weight-regular: 400;
  --sf-font-weight-medium: 500;
  --sf-font-weight-bold: 700;
  --sf-font-weight-heavy: 800;
  --sf-elevation-1: 0 1px 2px color-mix(in srgb, var(--sf-surface-base) 50%, transparent), 0 4px 12px color-mix(in srgb, var(--sf-surface-base) 35%, transparent);
  --sf-elevation-2: 0 4px 8px color-mix(in srgb, var(--sf-surface-base) 50%, transparent), 0 12px 28px color-mix(in srgb, var(--sf-surface-base) 45%, transparent);
  --sf-elevation-3: 0 12px 24px color-mix(in srgb, var(--sf-surface-base) 50%, transparent), 0 24px 56px color-mix(in srgb, var(--sf-surface-base) 60%, transparent), 0 0 32px color-mix(in srgb, var(--sf-interactive-rest) 30%, transparent);
  --sf-card-shadow-identity: 0 12px 40px color-mix(in srgb, var(--sf-bg) 55%, transparent), 0 0 24px color-mix(in srgb, var(--sf-primary) calc(var(--sf-glow-strength) * 45%), transparent);
  --sf-card-shadow-hover-identity: 0 20px 48px color-mix(in srgb, var(--sf-bg) 40%, transparent), 0 0 36px color-mix(in srgb, var(--sf-glow) calc(var(--sf-glow-strength) * 70%), transparent);
  --sf-atmosphere-strength: 0.85;
  --sf-hover-lift: 5px;
  --sf-hover-energy: 1.0;
  --sf-identity-radius: balanced;
  --sf-identity-motion: standard;
  --sf-identity-density: comfortable;
  --sf-identity-mood: calm;
  --sf-surface-mode: dark;
  --sf-scrollbar-size: 10px;
  --sf-scrollbar-track: #1a3358;
  --sf-scrollbar-thumb: #3b82f6;
  --sf-scrollbar-thumb-hover: #60a5fa;
  --sf-scrollbar-width-mode: thin;
  --sf-card-shadow: 0 12px 40px color-mix(in srgb, var(--sf-bg) 55%, transparent), 0 0 24px color-mix(in srgb, var(--sf-primary) calc(var(--sf-glow-strength) * 45%), transparent);
  --sf-card-shadow-hover: 0 20px 48px color-mix(in srgb, var(--sf-bg) 40%, transparent), 0 0 36px color-mix(in srgb, var(--sf-glow) calc(var(--sf-glow-strength) * 70%), transparent);
  --sf-commerce-await-text: color-mix(in srgb, #f59e0b 88%, #f0f6ff);
  --sf-commerce-pending-text: color-mix(in srgb, #3b82f6 88%, #f0f6ff);
  --sf-commerce-danger-text: color-mix(in srgb, #ef4444 88%, #f0f6ff);
  --sf-commerce-destructive-text: color-mix(in srgb, #ef4444 88%, #f0f6ff);
  --sf-error-text: color-mix(in srgb, #ef4444 88%, #f0f6ff);
}