/* ==========================================================================
   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;

    /* Category Family Accents (M1.11 KTDS 안 2 카드 헤더 5대 컬러 패밀리) */
    --color-blue-500:    #3b82f6;
    --color-orange-400:  #fb923c;
    --color-teal-500:    #14b8a6;

    /* Third-party Brand Accents */
    --color-kakao-bg:    #fee500;
    --color-kakao-text:  #191919;

    /* --------------------------------------------------------------------------
       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:       #cbd5e1;                  /* 불투명 Slate 300 솔리드 엣지 (직사광선 분리) */
    --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);

    /* 거주지/전체오픈(관외) 배지 & "내 위치 설정" 거주지 탭 accent (LOCATION_UX_IMPLEMENTATION_PLAN.md §4.3)
       기존 --cal-lottery-* 인디고 스케일과 동일 색상군 재사용(WCAG AA 검증된 색상 재활용, 이중관리 방지) */
    --accent-indigo:       #4338CA; /* Indigo 700, 흰 배경 대비 7.2:1 (AAA) */
    --accent-indigo-glow:  rgba(91, 104, 223, 0.15);
    --accent-indigo-tint:  #EEF2FF; /* Indigo 50 */

    /* --------------------------------------------------------------------------
       Category Family Accent Tokens (M1.11 KTDS 안 2 카드 헤더 5대 컬러 패밀리
       상단 3px 악센트 라인 + 5~8% 세미 파스텔 틴트 그라디언트, Light-only:
       다크 테마는 components.css에서 --bg-card-hover 솔리드로 전면 대체)
       -------------------------------------------------------------------------- */
    --cat-camp-accent:           var(--color-amber-500);
    --cat-camp-tint-start:       #fef6d8;
    --cat-camp-tint-end:         #fffbee;

    --cat-forest-accent:         var(--color-emerald-500);
    --cat-forest-tint-start:     #e6f9ed;
    --cat-forest-tint-end:       #f4fcf7;

    --cat-science-accent:        var(--color-blue-500);
    --cat-science-tint-start:    #ebf0fe;
    --cat-science-tint-end:      #f6f8ff;

    --cat-playground-accent:     var(--color-orange-400);
    --cat-playground-tint-start: #ffeedd;
    --cat-playground-tint-end:   #fff8f0;

    --cat-park-accent:           var(--color-teal-500);
    --cat-park-tint-start:       #e0f7f4;
    --cat-park-tint-end:         #f2fbf9;

    /* --------------------------------------------------------------------------
       Calendar Open-Run Refined Semantic Tokens (Option 1: Soft Warm Rose & Slate Indigo)
       -------------------------------------------------------------------------- */
    --cal-fc-accent:        #E05D6F;
    --cal-fc-hover:         #C73E52;
    --cal-fc-bg-subtle:     rgba(224, 93, 111, 0.06);
    --cal-fc-bg-badge:      rgba(224, 93, 111, 0.10);
    --cal-fc-border:        rgba(224, 93, 111, 0.28);
    --cal-fc-border-strong: #E05D6F;
    --cal-fc-text-strong:   #BE123C;
    --cal-fc-text-tip:      #881337;
    --cal-fc-glow:          rgba(224, 93, 111, 0.15);

    --cal-lottery-accent:        #5B68DF;
    --cal-lottery-hover:         #4B55C4;
    --cal-lottery-bg-subtle:     rgba(91, 104, 223, 0.06);
    --cal-lottery-bg-badge:      rgba(91, 104, 223, 0.10);
    --cal-lottery-border:        rgba(91, 104, 223, 0.28);
    --cal-lottery-border-strong: #5B68DF;
    --cal-lottery-text-strong:   #4338CA;
    --cal-lottery-text-tip:      #312E81;
    --cal-lottery-glow:          rgba(91, 104, 223, 0.15);
    --cal-lottery-grad-start:    #5B68DF;
    --cal-lottery-grad-end:      #818CF8;

    --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);

    /* 거주지/전체오픈(관외) 배지 & "내 위치 설정" 거주지 탭 accent — Dark */
    --accent-indigo:       #818CF8; /* Indigo 400, 다크 배경 대비 AA 통과 */
    --accent-indigo-glow:  rgba(129, 140, 248, 0.25);
    --accent-indigo-tint:  rgba(129, 140, 248, 0.12);

    /* Calendar Open-Run Dark Tokens */
    --cal-fc-accent:        #FB7185;
    --cal-fc-hover:         #F43F5E;
    --cal-fc-bg-subtle:     rgba(251, 113, 133, 0.10);
    --cal-fc-bg-badge:      rgba(251, 113, 133, 0.16);
    --cal-fc-border:        rgba(251, 113, 133, 0.30);
    --cal-fc-border-strong: #FB7185;
    --cal-fc-text-strong:   #FECDD3;
    --cal-fc-text-tip:      #FFE4E6;
    --cal-fc-glow:          rgba(251, 113, 133, 0.15);

    --cal-lottery-accent:        #818CF8;
    --cal-lottery-hover:         #6366F1;
    --cal-lottery-bg-subtle:     rgba(129, 140, 248, 0.10);
    --cal-lottery-bg-badge:      rgba(129, 140, 248, 0.16);
    --cal-lottery-border:        rgba(129, 140, 248, 0.30);
    --cal-lottery-border-strong: #818CF8;
    --cal-lottery-text-strong:   #E0E7FF;
    --cal-lottery-text-tip:      #EEF2FF;
    --cal-lottery-glow:          rgba(129, 140, 248, 0.15);
    --cal-lottery-grad-start:    #818CF8;
    --cal-lottery-grad-end:      #A5B4FC;

    --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);
}