/* Smart Kids Design Tokens — Sky-Blue Adventure Theme */

:root {
  /* ═══════════════════════════════════════════
     Sky Palette (Primary)
  ════════════════════════════════════════════ */
  --sky-top:    #6DC8EE;
  --sky-mid:    #87D8F7;
  --sky-light:  #B8E8F9;
  --sky-pale:   #D8F2FC;

  /* ═══════════════════════════════════════════
     Brand & Accent Colors
  ════════════════════════════════════════════ */
  --yellow:     #FFD600;
  --yellow-soft:#FFE135;
  --red-badge:  #CC2200;
  --navy:       #1A1A2E;
  --navy-soft:  #2D3561;

  /* ═══════════════════════════════════════════
     Game Card Accent Colors
  ════════════════════════════════════════════ */
  --c-memory:   #FF6B6B;
  --c-scramble: #FF8C42;
  --c-spelling: #F5C518;
  --c-brain:    #3F51B5;
  --c-pattern:  #F39C12;
  --c-math:     #9B59B6;
  --c-number:   #27AE60;
  --c-sequence: #17A589;
  --c-sorter:   #E91E8C;
  --c-shape:    #2196F3;

  /* ═══════════════════════════════════════════
     Legacy Color Support (for existing components)
  ════════════════════════════════════════════ */
  --sw-color-primary: #7F77DD;
  --sw-color-secondary: #FF6B35;
  --sw-color-success: #10B981;
  --sw-color-error: #EF4444;
  --sw-color-warning: #FBBF24;
  --sw-color-surface: #FFFFFF;
  --sw-color-surface-alt: #F9FAFB;
  --sw-color-border: #E5E7EB;
  --sw-color-text-primary: #111827;
  --sw-color-text-secondary: #6B7280;

  /* ═══════════════════════════════════════════
     Typography — Smart Kids Fonts
  ════════════════════════════════════════════ */
  --font-display: 'Boogaloo', cursive;
  --font-brand:   'Bubblegum Sans', cursive;
  --font-body:    'Baloo 2', cursive;

  /* Legacy font support */
  --sw-font-family-display: 'Boogaloo', 'Clash Display', 'Satoshi', sans-serif;
  --sw-font-family-sans: 'Baloo 2', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --sw-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;

  --sw-font-size-h1: 2rem;
  --sw-font-size-h2: 1.5rem;
  --sw-font-size-h3: 1.25rem;
  --sw-font-size-body: 1rem;
  --sw-font-size-small: 0.875rem;
  --sw-font-size-caption: 0.75rem;

  --sw-font-weight-regular: 400;
  --sw-font-weight-bold: 700;

  --sw-line-height-tight: 1.2;
  --sw-line-height-normal: 1.5;
  --sw-line-height-relaxed: 1.6;

  /* ═══════════════════════════════════════════
     Spacing Scale (4px base)
  ════════════════════════════════════════════ */
  --sw-spacing-xs: 4px;
  --sw-spacing-sm: 8px;
  --sw-spacing-md: 16px;
  --sw-spacing-lg: 24px;

  /* ═══════════════════════════════════════════
     Border Radius
  ════════════════════════════════════════════ */
  --radius-card: 24px;
  --radius-sm:   14px;

  --sw-radius-sm: 4px;
  --sw-radius-md: 8px;
  --sw-radius-lg: 12px;
  --sw-radius-full: 9999px;

  /* ═══════════════════════════════════════════
     Shadows
  ════════════════════════════════════════════ */
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.14);
  --shadow-lift: 0 22px 52px rgba(0, 0, 0, 0.22);
  --shadow-btn:  0 4px 14px rgba(0, 0, 0, 0.18);

  --sw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --sw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --sw-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* ═══════════════════════════════════════════
     Animation & Transitions
  ════════════════════════════════════════════ */
  --sw-animation-duration-fast: 150ms;
  --sw-animation-duration-normal: 200ms;
  --sw-animation-duration-slow: 300ms;
  --sw-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);

  --sw-transition-fast: all 150ms var(--sw-animation-easing);
  --sw-transition-normal: all 200ms var(--sw-animation-easing);
  --sw-transition-slow: all 300ms var(--sw-animation-easing);

  /* ═══════════════════════════════════════════
     Accessibility & Usability
  ════════════════════════════════════════════ */
  --sw-touch-target-min: 44px;
  --sw-contrast-normal: 4.5;
  --sw-contrast-large: 3;

  /* ═══════════════════════════════════════════
     Z-Index Scale
  ════════════════════════════════════════════ */
  --sw-z-base: 0;
  --sw-z-dropdown: 100;
  --sw-z-sticky: 500;
  --sw-z-modal: 1000;
  --sw-z-toast: 1001;
  --sw-z-focus: 1002;
}