/* ============================================
   Design Tokens - Playful Style (초등학생 대상)
   UI Design System 스킬 기반
   ============================================ */

:root {
  /* === Colors === */
  --color-primary: #FF6B6B;
  --color-primary-light: #FF8E8E;
  --color-primary-dark: #E84545;
  --color-secondary: #4ECDC4;
  --color-secondary-light: #7EDDD6;
  --color-secondary-dark: #36B5AD;
  --color-accent: #FFE66D;
  --color-accent-light: #FFF0A0;
  --color-accent-dark: #F5D330;
  --color-fun-purple: #A78BFA;
  --color-fun-blue: #60A5FA;
  --color-fun-pink: #F472B6;
  --color-fun-orange: #FB923C;

  /* Neutrals */
  --color-bg: #FFF8F0;
  --color-bg-card: #FFFFFF;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  --color-text: #2D3436;
  --color-text-light: #636E72;
  --color-text-white: #FFFFFF;
  --color-border: #DFE6E9;
  --color-border-light: #F0F0F0;

  /* Status */
  --color-success: #00B894;
  --color-danger: #FF6B6B;
  --color-warning: #FDCB6E;

  /* === Typography === */
  --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
  --font-size-3xl: 2.5rem;     /* 40px */
  --font-size-4xl: 3.5rem;     /* 56px */
  --font-size-hero: 5rem;      /* 80px - 카운트다운용 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* === Spacing (8pt grid) === */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 5rem;     /* 80px */

  /* === Border Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 20px rgba(255, 107, 107, 0.4);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === Z-index === */
  --z-base: 1;
  --z-overlay: 100;
  --z-modal: 200;
  --z-countdown: 300;
  --z-flash: 400;
}