:root {
  --sf-bg: #1a3348;
  --sf-surface: #3a5678;
  --sf-surface-2: #456080;
  --sf-card-bg: #3a5678;
  --sf-card-border: rgba(148,163,184,0.18);
  --sf-card-hover: rgba(56,189,248,0.28);
  --sf-section-bg: #1a3348;
  --sf-hero-bg: #1a3348;
  --sf-text: #f8fafc;
  --sf-text-muted: #94a3b8;
  --sf-primary: #38bdf8;
  --sf-accent: #a5b4fc;
  --sf-glow: #7dd3fc;
  --sf-success: #4ade80;
  --sf-premium: #f59e0b;
  --sf-error: #ef4444;
  --sf-commerce-await: #f59e0b;
  --sf-commerce-pending: #38bdf8;
  --sf-commerce-danger: #ef4444;
  --sf-commerce-destructive: #ef4444;
  --sf-price: #a5b4fc;
  --sf-heading-color: #f8fafc;
  --sf-product-name: #f8fafc;
  --sf-product-description: #94a3b8;
  --sf-border: rgba(255,255,255,0.05);
  --sf-border-hover: rgba(255,255,255,0.1);
  --sf-glass: rgba(58,86,120,0.72);
  --sf-hero-overlay: #334155;
  --sf-hero-overlay-opacity: 0.9;
  --sf-glow-intensity: 18;
  --sf-glass-level: 3;
  --sf-btn-primary-from: #38bdf8;
  --sf-btn-primary-to: #a5b4fc;
  --sf-btn-secondary-bg: rgba(255,255,255,0.05);
  --sf-btn-secondary-border: rgba(255,255,255,0.1);
  --sf-btn-secondary-hover: rgba(255,255,255,0.1);
  --sf-glass-blur: 20px;
  --sf-glow-strength: 0.18;
  --sf-shadow-glow: 0 0 40px color-mix(in srgb, var(--sf-primary) calc(var(--sf-glow-strength) * 100%), transparent);
  --sf-surface-base: #1a3348;
  --sf-surface-raised: #3a5678;
  --sf-surface-overlay: #456080;
  --sf-surface-card: #3a5678;
  --sf-surface-section: #1a3348;
  --sf-text-primary: #f8fafc;
  --sf-text-secondary: #94a3b8;
  --sf-text-tertiary: rgba(248,250,252,0.60);
  --sf-text-on-accent: #ffffff;
  --sf-interactive-rest: #38bdf8;
  --sf-interactive-hover: #a5b4fc;
  --sf-interactive-active: #38bdf8;
  --sf-interactive-focus-ring: rgba(56,189,248,0.45);
  --sf-border-subtle: rgba(255,255,255,0.05);
  --sf-border-default: rgba(148,163,184,0.18);
  --sf-border-strong: rgba(255,255,255,0.1);
  --sf-border-focus: rgba(56,189,248,0.50);
  --sf-radius-xs: 8px;
  --sf-radius-sm: 12px;
  --sf-radius-md: 16px;
  --sf-radius-lg: 22px;
  --sf-radius-xl: 30px;
  --sf-radius-card: 22px;
  --sf-radius-button: 16px;
  --sf-radius-pill: 999px;
  --sf-motion-duration-fast: 120ms;
  --sf-motion-duration-base: 180ms;
  --sf-motion-duration-slow: 260ms;
  --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: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --sf-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --sf-transition-slow: 260ms cubic-bezier(0.2, 0, 0, 1);
  --sf-density-space-unit: 0.875;
  --sf-density-card-padding: 0.95rem;
  --sf-density-section-gap: 1.5rem;
  --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) 35%, transparent);
  --sf-elevation-2: 0 2px 8px color-mix(in srgb, var(--sf-surface-base) 40%, transparent);
  --sf-elevation-3: 0 6px 16px color-mix(in srgb, var(--sf-surface-base) 45%, transparent);
  --sf-card-shadow-identity: 0 4px 14px color-mix(in srgb, var(--sf-bg) 50%, transparent);
  --sf-card-shadow-hover-identity: 0 8px 20px color-mix(in srgb, var(--sf-bg) 42%, transparent);
  --sf-atmosphere-strength: 0.55;
  --sf-hover-lift: 2px;
  --sf-hover-energy: 0.92;
  --sf-identity-radius: rounded;
  --sf-identity-motion: crisp;
  --sf-identity-density: compact;
  --sf-identity-mood: glass;
  --sf-surface-mode: dark;
  --sf-scrollbar-size: 8px;
  --sf-scrollbar-track: #1a3348;
  --sf-scrollbar-thumb: #38bdf8;
  --sf-scrollbar-thumb-hover: #a5b4fc;
  --sf-scrollbar-width-mode: thin;
  --sf-card-shadow: 0 4px 14px color-mix(in srgb, var(--sf-bg) 50%, transparent);
  --sf-card-shadow-hover: 0 8px 20px color-mix(in srgb, var(--sf-bg) 42%, transparent);
  --sf-commerce-await-text: color-mix(in srgb, #f59e0b 88%, #f8fafc);
  --sf-commerce-pending-text: color-mix(in srgb, #38bdf8 88%, #f8fafc);
  --sf-commerce-danger-text: color-mix(in srgb, #ef4444 88%, #f8fafc);
  --sf-commerce-destructive-text: color-mix(in srgb, #ef4444 88%, #f8fafc);
  --sf-error-text: color-mix(in srgb, #ef4444 88%, #f8fafc);
}