/* OceanKids Design Tokens
   브랜드 가이드(oceankids_260612.pdf) 기준: Blue #283382 / Gray #dbdcdc
   폰트는 Adobe Fonts 키트 발급 전까지 Lobster(Cheesecake 대체) / Poppins(Fractul Variable 대체) 사용 */

:root {
  /* Brand Blue scale */
  --color-primary-50:  #f3f4fd;
  --color-primary-100: #e6e9fb;
  --color-primary-200: #cdd3f7;
  --color-primary-300: #aab3f0;
  --color-primary-400: #7f89e6;
  --color-primary-500: #5863d8;
  --color-primary-600: #434dc0;
  --color-primary-700: #37409f;
  --color-primary-800: #2f377f;
  --color-primary-900: #283382;

  --color-glow: #4fa3ff; /* 네온 글로우 포인트 */
  --color-glow-soft: #8cc6ff;

  /* Neutral scale (OceanKids Gray #dbdcdc 기준) */
  --color-gray-50: #f7f8f8;
  --color-gray-100: #eef0f0;
  --color-gray-200: #dbdcdc; /* OceanKids Gray */
  --color-gray-300: #c5c7c8;
  --color-gray-400: #a3a6a8;
  --color-gray-500: #818487;
  --color-gray-600: #616467;
  --color-gray-700: #46484b;
  --color-gray-800: #2e3032;
  --color-gray-900: #14181f;

  /* Semantic surface/text */
  --color-ink: #14181f;
  --color-ink-soft: #585b61;
  --color-surface: #ffffff;
  --color-bg: #f7f8fa;
  --color-border: #e3e5e7;

  /* Status */
  --color-success: #2e9e6b;
  --color-success-bg: #e7f6ef;
  --color-warning: #e0a526;
  --color-warning-bg: #fdf3e0;
  --color-error: #d6483c;
  --color-error-bg: #fbe9e7;

  /* Typography */
  --font-display: 'Lobster', cursive; /* TODO: Adobe Fonts 키트 발급 후 Cheesecake로 교체 */
  /* 본문: 영문·숫자는 Poppins(참고대상 톤 유지), 한글은 Poppins에 글자가 없어 Pretendard로 자동 폴백 → 한글 가독성 확보 */
  --font-body: 'Poppins', 'Pretendard', 'Malgun Gothic', sans-serif;

  --fs-display: 2.75rem;
  --fs-h1: 1.75rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;

  /* Spacing (8px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 24, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 24, 31, 0.12);
  --shadow-glow: 0 0 24px rgba(79, 163, 255, 0.45), 0 0 56px rgba(40, 90, 167, 0.3);

  /* Layout */
  --max-width: 480px; /* 모바일 웹앱 기준 폭 */
  --header-height: 56px;
  --bottom-nav-height: 64px;
  --bottom-nav-offset: 78px;
}