/**
 * Flow to Freedom — Design Tokens V3 (Preview)
 * Premium EdTech / Game — gedämpft, ruhig, vertrauenswürdig.
 * Inspiriert von ruhigen Lern-Oberflächen (Calm), Coaching-Plattformen (BetterUp), klarem Content (James Clear).
 *
 * NUR für design-preview.html — überschreibt V2 gezielt via .ftf-v3 Scope.
 * Wird NICHT auf der Live-Seite geladen.
 */
@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,500;0,600;0,700;1,500&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

.ftf-v3,
[data-ftf-theme="v3"] {
  /* —— Markenfarben (gedämpft) —— */
  --v3-navy-950: #060910;
  --v3-navy-900: #0c1118;
  --v3-navy-800: #121a24;
  --v3-navy-700: #1a2432;
  --v3-navy-600: #243044;

  --v3-gold-500: #c9a84c;
  --v3-gold-400: #d4b86a;
  --v3-gold-glow: rgba(201, 168, 76, 0.22);

  --v3-cyan-500: #5a8f9a;
  --v3-cyan-400: #6fa3ad;
  --v3-cyan-glow: rgba(90, 143, 154, 0.18);

  --v3-green-500: #5a8f72;
  --v3-green-glow: rgba(90, 143, 114, 0.16);

  --v3-violet-500: #6b5b7a;
  --v3-violet-glow: rgba(107, 91, 122, 0.2);

  --v3-amber-500: #b8884a;
  --v3-warm-500: #a87840;

  --v3-serenia-100: #f6f1e8;
  --v3-serenia-200: #ebe4d6;
  --v3-serenia-300: #ddd4c4;

  /* —— Semantik (map auf V2-Namen für Kompatibilität) —— */
  --bg-dark: var(--v3-navy-950);
  --bg-void: var(--v3-navy-950);
  --bg-surface: var(--v3-navy-900);
  --bg-elevated: var(--v3-navy-800);
  --bg-panel: var(--v3-navy-800);
  --bg-card: var(--v3-navy-800);

  --color-gold: var(--v3-gold-500);
  --color-blue: var(--v3-cyan-500);
  --color-orange: var(--v3-amber-500);
  --color-success: var(--v3-green-500);
  --color-shadow: var(--v3-violet-500);
  --color-danger: #b85c52;
  --color-warning: var(--v3-gold-400);

  --text-primary: #e8edf2;
  --text-muted: #8a9aab;
  --text-dim: #5c6d7e;
  --text-soft: #7a8f9e;
  --text-soft-bright: #9eb3c2;

  --border-main: rgba(255, 255, 255, 0.1);
  --border-subtle: rgba(255, 255, 255, 0.06);

  --brand-fire: var(--v3-amber-500);
  --gold: var(--v3-gold-500);
  --cyber-cyan: var(--v3-cyan-500);
  --good: var(--v3-green-500);
  --bad: var(--color-danger);
  --warn: var(--v3-gold-400);

  /* —— Typografie —— */
  --ftf-font-display: "Cormorant", Georgia, "Times New Roman", serif;
  --ftf-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ftf-font-mono: ui-monospace, "Cascadia Code", monospace;

  --v3-text-xs: 0.75rem;
  --v3-text-sm: 0.875rem;
  --v3-text-base: 1rem;
  --v3-text-lg: 1.125rem;
  --v3-text-xl: 1.25rem;
  --v3-text-2xl: 1.5rem;
  --v3-text-3xl: clamp(1.75rem, 4vw, 2.25rem);
  --v3-text-4xl: clamp(2rem, 5vw, 3rem);
  --v3-text-hero: clamp(2.25rem, 6vw, 3.75rem);

  --v3-leading-tight: 1.15;
  --v3-leading-snug: 1.35;
  --v3-leading-normal: 1.55;
  --v3-leading-relaxed: 1.7;

  /* —— Spacing —— */
  --v3-space-1: 4px;
  --v3-space-2: 8px;
  --v3-space-3: 12px;
  --v3-space-4: 16px;
  --v3-space-5: 24px;
  --v3-space-6: 32px;
  --v3-space-7: 48px;
  --v3-space-8: 64px;
  --v3-space-9: 96px;

  --v3-container: 1120px;
  --v3-container-wide: 1280px;
  --v3-container-narrow: 720px;

  /* —— Radius —— */
  --ftf-radius-sm: 8px;
  --ftf-radius-md: 12px;
  --ftf-radius-lg: 16px;
  --ftf-radius-xl: 22px;
  --ftf-radius-pill: 999px;

  /* —— Shadow —— */
  --v3-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
  --v3-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.35);
  --v3-shadow-gold: 0 0 32px var(--v3-gold-glow);

  /* —— Motion —— */
  --v3-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --v3-duration-fast: 150ms;
  --v3-duration: 280ms;
  --v3-duration-slow: 480ms;

  /* —— Zonen (Limitia → Serenia) —— */
  --zone-limitia: var(--v3-violet-500);
  --zone-regulia: var(--v3-cyan-500);
  --zone-anchoria: var(--v3-cyan-400);
  --zone-portfortuna: var(--v3-warm-500);
  --zone-libertara: var(--v3-green-500);
  --zone-serenia: var(--v3-gold-500);

  /* Status */
  --status-live: var(--v3-green-500);
  --status-wait: var(--v3-gold-400);
  --status-locked: var(--v3-navy-600);
  --status-off: var(--text-dim);

  font-family: var(--ftf-font-body);
  color: var(--text-primary);
  background: var(--bg-void);
}

/* —— V3 Hell (Serenia) — warm, offen, Club & Marketing-Ende der Reise —— */
.ftf-v3-light,
[data-ftf-theme="v3-light"] {
  --v3-light-50: #faf7f2;
  --v3-light-100: #f4efe6;
  --v3-light-200: #ebe4d6;
  --v3-light-300: #ddd4c4;
  --v3-light-ink: #1c2634;
  --v3-light-ink-muted: #4a5568;
  --v3-light-ink-dim: #6b7280;

  --bg-dark: var(--v3-light-100);
  --bg-void: var(--v3-light-100);
  --bg-surface: var(--v3-light-50);
  --bg-elevated: #ffffff;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;

  --text-primary: var(--v3-light-ink);
  --text-muted: var(--v3-light-ink-muted);
  --text-dim: var(--v3-light-ink-dim);
  --text-soft: #5c6778;
  --text-soft-bright: #3d4a5c;

  --border-main: rgba(28, 38, 52, 0.12);
  --border-subtle: rgba(28, 38, 52, 0.07);

  --v3-gold-500: #b8923a;
  --v3-gold-400: #c9a84c;
  --v3-gold-glow: rgba(184, 146, 58, 0.18);

  --v3-shadow-sm: 0 4px 20px rgba(28, 38, 52, 0.06);
  --v3-shadow-md: 0 16px 48px rgba(28, 38, 52, 0.08);
  --v3-shadow-gold: 0 8px 28px var(--v3-gold-glow);

  --gold: var(--v3-gold-500);
  --brand-fire: var(--v3-amber-500);
  --cyber-cyan: #4a7d87;

  --status-locked: var(--v3-light-300);

  font-family: var(--ftf-font-body);
  color: var(--text-primary);
  background: var(--bg-void);
}

@media (prefers-reduced-motion: reduce) {
  .ftf-v3,
  [data-ftf-theme="v3"],
  .ftf-v3-light,
  [data-ftf-theme="v3-light"] {
    --v3-duration-fast: 0ms;
    --v3-duration: 0ms;
    --v3-duration-slow: 0ms;
  }
}