/**
 * SwissFans 3.0 Design Tokens — premium dark-first platform system
 * Brand: deep violet / magenta gradient (from logo)
 * Single source of truth — every screen must consume these tokens, no per-page colors.
 */
:root {
  /* Breakpoints (reference): mobile <768, tablet 768–1199, desktop >=1200 */

  /* ---- Canonical palette (verbindlich, siehe Design-System-Spec) ---- */
  --sf-bg-page: #150a16;
  --sf-bg-card: #1c0f1f;
  --sf-bg-elevated: #221325;
  --sf-bg-elevated-2: #26142a;

  --sf-gradient-accent: linear-gradient(135deg, #e91e8c, #8b2fc9);
  --sf-gradient-placeholder: linear-gradient(160deg, #2a1030, #1c0f1f);

  --sf-text-primary: #f7eef8;
  --sf-text-secondary: #c4b3c6;
  --sf-text-muted: #8a7a8d;

  --sf-border-standard: #2e1a32;
  --sf-border-secondary: #4a3450;

  /* ---- Surfaces — aliased to canonical palette for backward compatibility ---- */
  --sf-color-void: var(--sf-bg-page);
  --sf-color-surface-1: var(--sf-bg-card);
  --sf-color-surface-2: var(--sf-bg-elevated);
  --sf-color-surface-3: var(--sf-bg-elevated-2);
  --sf-color-glass: rgba(255, 255, 255, 0.03);

  /* Global premium canvas — soft vertical wash + top glow (GPU-friendly, no fixed attachment) */
  --sf-bg-glow: radial-gradient(
    ellipse 90% 55% at 50% -12%,
    rgba(233, 30, 140, 0.2),
    rgba(139, 47, 201, 0.1) 42%,
    transparent 70%
  );
  --sf-bg-gradient: linear-gradient(
    180deg,
    #1c0f20 0%,
    #150a16 45%,
    #0f070f 100%
  );
  --sf-bg-canvas: var(--sf-bg-glow), var(--sf-bg-gradient);

  /* Text — aliased */
  --sf-color-text: var(--sf-text-primary);
  --sf-color-text-secondary: var(--sf-text-secondary);
  --sf-color-text-tertiary: var(--sf-text-muted);

  /* Borders — aliased */
  --sf-color-border: var(--sf-border-standard);
  --sf-color-border-subtle: rgba(255, 255, 255, 0.04);
  --sf-color-border-secondary: var(--sf-border-secondary);

  /* Brand accent — primary CTA only. Solid value = representative accent for text/icons/rings;
     use --sf-gradient-accent for filled buttons/badges/progress. */
  --sf-color-accent: #e91e8c;
  --sf-color-accent-hover: #f0329a;
  --sf-color-accent-muted: rgba(233, 30, 140, 0.14);
  --sf-color-accent-deep: #8b2fc9;
  --sf-color-border-accent: rgba(233, 30, 140, 0.28);

  /* Semantic */
  --sf-color-verify: #3b82f6;
  --sf-color-success: #22c55e;
  --sf-color-warning: #f59e0b;
  --sf-color-danger: #ef4444;
  --sf-color-gold: #d4a853;

  /* Typography */
  --sf-font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sf-font-size-xs: 0.75rem;
  --sf-font-size-sm: 0.875rem;
  --sf-font-size-md: 1rem;
  --sf-font-size-lg: 1.125rem;
  --sf-font-size-xl: 1.375rem;
  --sf-font-size-2xl: 2rem;
  --sf-font-size-3xl: 2.75rem;
  --sf-font-size-4xl: 3.5rem;
  --sf-font-size-hero: clamp(2.25rem, 5.5vw, 4.25rem);
  --sf-font-size-display: clamp(1.125rem, 2vw, 1.375rem);
  --sf-font-weight-normal: 400;
  --sf-font-weight-medium: 500;
  --sf-font-weight-semibold: 600;
  --sf-line-height-tight: 1.08;
  --sf-line-height-normal: 1.6;
  --sf-line-height-relaxed: 1.75;
  --sf-letter-tight: -0.04em;
  --sf-letter-wide: 0.04em;

  /* Spacing */
  --sf-space-1: 0.25rem;
  --sf-space-2: 0.5rem;
  --sf-space-3: 0.75rem;
  --sf-space-4: 1rem;
  --sf-space-5: 1.25rem;
  --sf-space-6: 1.5rem;
  --sf-space-8: 2rem;
  --sf-space-10: 2.5rem;
  --sf-space-12: 3rem;
  --sf-space-16: 4rem;
  --sf-space-20: 5rem;
  --sf-space-24: 6rem;
  --sf-space-32: 8rem;

  /* Radius */
  --sf-radius-sm: 8px;
  --sf-radius-md: 12px;
  --sf-radius-lg: 16px;
  --sf-radius-xl: 20px;
  --sf-radius-full: 9999px;

  /* Shadows — soft, brand-tinted */
  --sf-shadow-xs: 0 1px 2px rgba(8, 2, 18, 0.28);
  --sf-shadow-sm: 0 4px 14px rgba(8, 2, 18, 0.28), 0 1px 2px rgba(8, 2, 18, 0.16);
  --sf-shadow-md: 0 10px 28px rgba(8, 2, 18, 0.42), 0 2px 8px rgba(8, 2, 18, 0.2);
  --sf-shadow-lg: 0 18px 44px rgba(8, 2, 18, 0.5), 0 4px 16px rgba(8, 2, 18, 0.22);
  --sf-shadow-glow: 0 0 24px rgba(225, 34, 146, 0.18);

  /* Layout — platform content width */
  --sf-container-max: 1480px;
  --sf-container-narrow: 760px;
  --sf-nav-height: 64px;
  --sf-touch-min: 44px;

  /* Motion — subtle only */
  --sf-duration-fast: 180ms;
  --sf-duration-normal: 320ms;
  --sf-duration-slow: 480ms;
  --sf-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sf-scale-hover: 1.02;

  /* Z-index */
  --sf-z-nav: 100;
  --sf-z-bottom-nav: 150;
  --sf-z-modal: 200;
  --sf-z-toast: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sf-duration-fast: 0ms;
    --sf-duration-normal: 0ms;
    --sf-duration-slow: 0ms;
    --sf-scale-hover: 1;
  }
}