/* Word Translator web app — visual identity v3.
   An education-first palette: deep indigo navigation, royal blue → purple
   gradient as the primary accent, a soft cyan secondary used sparingly for
   warmth, light spacious content. Red is reserved ONLY for destructive
   actions/warnings (--wt-danger) — never the brand accent.
   Kept separate from the Chrome extension's own theme (src/shared/theme.css,
   untouched this pass — see the redesign notes for why). */
:root {
  /* Navigation surfaces — deep indigo, warmer than plain navy/black */
  --wt-navy: #1e1b4b;
  --wt-navy-2: #2c2777;
  --wt-navy-border: #3a3591;
  --wt-navy-text: #f6f5ff;
  --wt-navy-text-muted: #b8b3ea;

  /* Primary brand — royal blue → purple */
  --wt-primary: #4f46e5;
  --wt-primary-hover: #6366f1;
  --wt-purple: #9333ea;
  --wt-purple-hover: #a855f7;
  --wt-cyan: #22d3ee;
  --wt-gradient: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
  --wt-gradient-warm: linear-gradient(135deg, #6366f1 0%, #9333ea 55%, #22d3ee 130%);
  --wt-gradient-soft: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  --wt-primary-ghost: rgba(79, 70, 229, 0.1);
  --wt-primary-ghost-strong: rgba(79, 70, 229, 0.26);
  --wt-purple-ghost: rgba(147, 51, 234, 0.12);
  --wt-cyan-ghost: rgba(34, 211, 238, 0.14);

  /* Danger — reserved for destructive actions & warnings only, never brand */
  --wt-danger: #e0546b;
  --wt-danger-hover: #ef6f83;
  --wt-danger-ghost: rgba(224, 84, 107, 0.1);

  /* Success / warm accent (streaks, "coming soon") */
  --wt-success: #16a34a;
  --wt-success-ghost: rgba(34, 197, 94, 0.1);
  --wt-amber: #f59e0b;
  --wt-amber-ghost: rgba(245, 158, 11, 0.12);

  /* Shape & depth — soft, friendly, not sharp/technical */
  --wt-radius-sm: 10px;
  --wt-radius: 14px;
  --wt-radius-lg: 20px;
  --wt-radius-xl: 26px;
  --wt-shadow: 0 16px 40px rgba(30, 27, 75, 0.16);
  --wt-shadow-sm: 0 2px 12px rgba(30, 27, 75, 0.07);
  --wt-shadow-glow: 0 10px 30px rgba(79, 70, 229, 0.25);

  /* Spacing scale */
  --wt-space-1: 4px;
  --wt-space-2: 8px;
  --wt-space-3: 12px;
  --wt-space-4: 16px;
  --wt-space-5: 24px;
  --wt-space-6: 32px;
  --wt-space-7: 48px;

  /* Typography — friendly, welcoming hierarchy from a system stack (no
     external font request: this is a static site with no build step, and a
     network font fetch would be a new dependency this pass doesn't need). */
  --wt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wt-fs-sm: 12.5px;
  --wt-fs: 14.5px;
  --wt-fs-lg: 16.5px;
  --wt-fs-xl: 21px;
  --wt-fs-2xl: 28px;
  --wt-fs-3xl: 34px;

  /* Motion — subtle only */
  --wt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wt-motion-fast: 0.15s;
  --wt-motion: 0.22s;
}