/* ==========================================================================
   TraceMyLetter.com - Design System Tokens
   ========================================================================== */

:root {
  /* Brand Color Palette */
  --color-primary: #5850EC;
  --color-primary-hover: #4F46E5;
  --color-primary-light: #EEF2FF;
  --color-primary-subtle: #E0E7FF;
  
  --color-accent-coral: #FF6482;
  --color-accent-amber: #F59E0B;
  --color-accent-green: #10B981;
  --color-accent-sky: #0EA5E9;
  --color-accent-purple: #8B5CF6;
  --color-accent-pink: #EC4899;

  /* Neutrals & Surfaces */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F1F5F9;
  --color-surface-alt: #F8FAFC;
  
  --color-text: #1E293B;
  --color-text-muted: #64748B;
  --color-text-light: #94A3B8;
  --color-border: #E2E8F0;
  --color-border-focus: #818CF8;
  
  /* Traditional Handwriting Guidelines Colors */
  --guide-headline: #7DD3FC;      /* Sky blue top headline */
  --guide-midline: #FBBF24;       /* Warm dashed midline */
  --guide-baseline: #34D399;      /* Green solid baseline */
  --guide-descender: #F472B6;     /* Pink bottom line for descenders (g, j, p, q, y) */
  --guide-stroke-hint: #6366F1;   /* Starting dot & stroke direction */
  
  /* Tracing Letter Colors */
  --trace-model-fill: #CBD5E1;
  --trace-dots-color: #94A3B8;
  --trace-active-pen: #4F46E5;

  /* Typography */
  --font-brand: 'Fredoka', -apple-system, BlinkMacSystemFont, "Comic Sans MS", cursive, sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-handwriting: 'Fredoka', 'Quicksand', -apple-system, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-fun: 0 8px 0 rgba(0, 0, 0, 0.08), 0 15px 25px rgba(91, 70, 232, 0.12);
  --shadow-fun-press: 0 2px 0 rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}