/* ==========================================================================
   Kids Trip - Global Design Tokens (css/tokens.css)
   Version: 1.0.0 (KTDS - Light-First Dual Theme)
   Single Source of Truth based on DESIGN_SYSTEM.md
   ========================================================================== */

:root {
    /* --------------------------------------------------------------------------
       1. Primitive Color Palette (불변 원시 색상 스케일)
       -------------------------------------------------------------------------- */
    --color-slate-950: #070a11;
    --color-slate-900: #0b0f19;
    --color-slate-850: #101726;
    --color-slate-800: #131b2e;
    --color-slate-700: #1e293b;
    --color-slate-600: #334155;
    --color-slate-500: #64748b;
    --color-slate-400: #94a3b8;
    --color-slate-300: #cbd5e1;
    --color-slate-200: #e2e8f0;
    --color-slate-100: #f1f5f9;
    --color-slate-50:  #f8fafc;
    --color-white:     #ffffff;

    /* Forest Emerald (메인 브랜드) */
    --color-emerald-900: #064e3b;
    --color-emerald-800: #065f46;
    --color-emerald-700: #047857;
    --color-emerald-600: #059669;
    --color-emerald-500: #10b981;
    --color-emerald-400: #34d399;
    --color-emerald-100: #d1fae5;
    --color-emerald-50:  #ecfdf5;

    /* Semantic Accents */
    --color-amber-600:   #d97706;
    --color-amber-500:   #f59e0b;
    --color-amber-400:   #fbbf24;
    --color-amber-50:    #fffbeb;

    --color-sky-600:     #0284c7;
    --color-sky-500:     #0ea5e9;
    --color-sky-400:     #38bdf8;
    --color-sky-50:      #f0f9ff;

    --color-rose-600:    #e11d48;
    --color-rose-500:    #f43f5e;
    --color-rose-400:    #fb7185;
    --color-rose-50:     #fff1f2;

    --color-purple-600:  #9333ea;
    --color-purple-500:  #a855f7;

    /* --------------------------------------------------------------------------
       2. Spacing System (4px / 8px Base Scale)
       -------------------------------------------------------------------------- */
    --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;  /* 모바일 최소 터치 높이 */

    /* --------------------------------------------------------------------------
       3. Typography Scale & Fonts
       -------------------------------------------------------------------------- */
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --font-size-display: clamp(1.5rem, 4vw, 2rem);    /* 24px ~ 32px */
    --font-size-h1:      clamp(1.25rem, 3vw, 1.5rem);  /* 20px ~ 24px */
    --font-size-h2:      1.125rem;                     /* 18px */
    --font-size-h3:      0.9375rem;                    /* 15px */
    --font-size-body:    0.9375rem;                    /* 15px */
    --font-size-caption: 0.8125rem;                    /* 13px */
    --font-size-micro:   0.6875rem;                    /* 11px */

    /* --------------------------------------------------------------------------
       4. Border Radius Tokens
       -------------------------------------------------------------------------- */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* --------------------------------------------------------------------------
       5. Motion & Easing
       -------------------------------------------------------------------------- */
    --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 350ms;

    /* --------------------------------------------------------------------------
       6. Mobile & Safe Area Standards
       -------------------------------------------------------------------------- */
    --touch-min-size: 48px;
    --safe-top:       env(safe-area-inset-top, 0px);
    --safe-bottom:    env(safe-area-inset-bottom, 0px);
    --header-height:  64px;
    --nav-height:     60px;
}

/* ==========================================================================
   Semantic Theme Switching (☀️ Clean Light Theme - 기본값)
   ========================================================================== */
:root, [data-theme="light"] {
    --bg-primary:         var(--color-slate-50);    /* #F8FAFC */
    --bg-secondary:       var(--color-white);       /* #FFFFFF */
    --bg-card-hover:      var(--color-slate-100);   /* #F1F5F9 */
    --bg-card-active:     var(--color-slate-200);   /* #E2E8F0 */
    --bg-glass:           rgba(255, 255, 255, 0.90);
    --bg-glass-heavy:     rgba(255, 255, 255, 0.98);

    --text-primary:       #0f172a;                  /* 딥 차콜 (WCAG AAA 13.5:1) */
    --text-secondary:     #334155;                  /* Slate 700 (고시인성 7.2:1) */
    --text-muted:         #64748b;                  /* Slate 500 */
    --text-light:         #0f172a;
    --text-inverse:       var(--color-white);

    --border-color:       rgba(15, 23, 42, 0.12);
    --border-hover:       #94a3b8;
    --border-active:      #64748b;

    --accent-emerald:      var(--color-emerald-600); /* #059669 (명도비 4.8:1 합격) */
    --accent-emerald-glow: rgba(5, 150, 105, 0.15);
    --accent-emerald-tint: var(--color-emerald-50);

    --accent-amber:        var(--color-amber-600);   /* #D97706 */
    --accent-amber-glow:   rgba(217, 119, 6, 0.15);
    --accent-amber-tint:   var(--color-amber-50);

    --accent-blue:         var(--color-sky-600);     /* #0284C7 */
    --accent-blue-glow:    rgba(2, 132, 199, 0.15);
    --accent-blue-tint:    var(--color-sky-50);

    --accent-rose:         var(--color-rose-600);    /* #E11D48 */
    --accent-rose-glow:    rgba(225, 29, 72, 0.15);
    --accent-rose-tint:    var(--color-rose-50);

    --accent-purple:       var(--color-purple-600);

    --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md:           0 4px 16px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg:           0 10px 30px -4px rgba(0, 0, 0, 0.10);
    --shadow-modal:        0 20px 40px -4px rgba(0, 0, 0, 0.14);
}

/* ==========================================================================
   Semantic Theme Switching (🌙 Dark Theme - 지원 모드)
   ========================================================================== */
[data-theme="dark"] {
    --bg-primary:         var(--color-slate-900);   /* #0B0F19 */
    --bg-secondary:       var(--color-slate-800);   /* #131B2E */
    --bg-card-hover:      #1c2742;
    --bg-card-active:     #243254;
    --bg-glass:           rgba(19, 27, 46, 0.85);
    --bg-glass-heavy:     rgba(11, 15, 25, 0.95);

    --text-primary:       var(--color-slate-100);   /* #F1F5F9 */
    --text-secondary:     var(--color-slate-400);   /* #94A3B8 */
    --text-muted:         #64748b;
    --text-light:         #ffffff;
    --text-inverse:       var(--color-slate-950);

    --border-color:       var(--color-slate-700);
    --border-hover:       var(--color-slate-600);
    --border-active:      var(--color-slate-500);

    --accent-emerald:      var(--color-emerald-500); /* #10B981 */
    --accent-emerald-glow: rgba(16, 185, 129, 0.25);
    --accent-emerald-tint: rgba(16, 185, 129, 0.12);

    --accent-amber:        var(--color-amber-500);   /* #F59E0B */
    --accent-amber-glow:   rgba(245, 158, 11, 0.25);
    --accent-amber-tint:   rgba(245, 158, 11, 0.12);

    --accent-blue:         var(--color-sky-400);     /* #38BDF8 */
    --accent-blue-glow:    rgba(56, 189, 248, 0.25);
    --accent-blue-tint:    rgba(56, 189, 248, 0.12);

    --accent-rose:         var(--color-rose-500);    /* #F43F5E */
    --accent-rose-glow:    rgba(244, 63, 94, 0.25);
    --accent-rose-tint:    rgba(244, 63, 94, 0.12);

    --accent-purple:       var(--color-purple-500);

    --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:           0 6px 20px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg:           0 12px 36px -4px rgba(0, 0, 0, 0.65);
    --shadow-modal:        0 20px 40px -4px rgba(0, 0, 0, 0.70);
}