/**
 * TranscribeFlow — design tokens (Option C: gradient bleu→violet)
 * Unified across site marketing + app SaaS.
 * Light is default; [data-theme="dark"] toggles dark.
 */

:root {
  --tf-bg-primary:        #FFFFFF;
  --tf-bg-secondary:      #FAFAF9;
  --tf-bg-elevated:       #F4F4F1;
  --tf-fg-primary:        #0F172A;
  --tf-fg-secondary:      #475569;
  --tf-fg-tertiary:       #64748B;
  --tf-fg-muted:          #94A3B8;
  --tf-border-subtle:     #F1F5F9;
  --tf-border:            #E2E8F0;
  --tf-border-strong:     #CBD5E1;

  --tf-accent-blue:       #4F7CFF;
  --tf-accent-indigo:     #6366F1;
  --tf-accent-violet:     #8B5CF6;
  --tf-accent-deep:       #4F46E5;
  --tf-accent-subtle:     rgba(99, 102, 241, 0.08);
  --tf-accent-glow:       rgba(99, 102, 241, 0.20);
  --tf-gradient-brand:    linear-gradient(135deg, #4F7CFF 0%, #6366F1 50%, #8B5CF6 100%);
  --tf-gradient-cta:      linear-gradient(135deg, #4F46E5 0%, #6366F1 60%, #8B5CF6 100%);
  --tf-gradient-subtle:   linear-gradient(135deg, rgba(79,124,255,0.06), rgba(139,92,246,0.06));

  --tf-success:           #10B981;
  --tf-warning:           #F59E0B;
  --tf-danger:            #EF4444;

  --tf-font-display:      "Cal Sans", "Inter", -apple-system, sans-serif;
  --tf-font-body:         "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --tf-font-mono:         "Geist Mono", "JetBrains Mono", monospace;
  --tf-font-editorial:    "Instrument Serif", Georgia, serif;

  --tf-text-h1:           clamp(48px, 6vw, 88px);
  --tf-text-h2:           clamp(32px, 4vw, 56px);
  --tf-text-h3:           clamp(24px, 2.5vw, 36px);
  --tf-text-h4:           20px;
  --tf-text-body:         16px;
  --tf-text-small:        14px;
  --tf-text-mono:         12px;
  --tf-text-mono-sm:      10px;

  --tf-tracking-tight:    -0.03em;
  --tf-tracking-normal:   0;
  --tf-tracking-wide:     0.08em;
  --tf-tracking-wider:    0.12em;

  --tf-radius-sm:         4px;
  --tf-radius-md:         6px;
  --tf-radius-lg:         8px;
  --tf-radius-xl:         12px;
  --tf-radius-2xl:        16px;
  --tf-radius-pill:       9999px;

  --tf-shadow-sm:         0 1px 2px rgba(15, 23, 42, 0.06);
  --tf-shadow-md:         0 4px 12px rgba(15, 23, 42, 0.08);
  --tf-shadow-lg:         0 20px 40px rgba(15, 23, 42, 0.12);
  --tf-shadow-glow:       0 0 24px rgba(99, 102, 241, 0.20);
  --tf-shadow-glow-strong: 0 16px 48px rgba(99, 102, 241, 0.35);

  --tf-ease-expo:         cubic-bezier(0.16, 1, 0.3, 1);
  --tf-ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --tf-duration-fast:     150ms;
  --tf-duration-base:     250ms;
  --tf-duration-slow:     400ms;
}

[data-theme="dark"] {
  --tf-bg-primary:        #0A0E1A;
  --tf-bg-secondary:      #131829;
  --tf-bg-elevated:       #1C2236;
  --tf-fg-primary:        #F8FAFC;
  --tf-fg-secondary:      #CBD5E1;
  --tf-fg-tertiary:       #94A3B8;
  --tf-fg-muted:          #64748B;
  --tf-border-subtle:     rgba(255, 255, 255, 0.06);
  --tf-border:            rgba(255, 255, 255, 0.10);
  --tf-border-strong:     rgba(255, 255, 255, 0.18);
  --tf-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.3);
  --tf-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.4);
  --tf-shadow-lg:         0 20px 40px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}