/**
 * 몽글 운세 — 통합 디자인 토큰 (Unified Design Tokens)
 * ---------------------------------------------------------------
 * variables.css + design-system.css + theme-light/dark.css 를
 * 하나로 통합한 단일 소스(SSOT)입니다.
 *
 * 채택 기준: 실제 프로덕션에서 ~100개 페이지가 쓰는 variables.css 값
 *   - Primary : #8B5CF6  (구 design-system.css의 #A78BFA 아님)
 *   - Font    : Pretendard (구 Spline Sans 아님)
 *
 * 교체 방법:
 *   기존:  <link href="css/variables.css">  + design-system.css + theme-*.css
 *   변경:  <link href="css/design-tokens.css">   (이 파일 하나만)
 *
 * 레거시 별칭(§4)이 구 design-system.css / theme-*.css 변수명을
 * 새 토큰에 매핑하므로, 그 변수를 쓰던 페이지도 수정 없이 동작합니다.
 * ============================================================= */

/* ============================================================
   1. 라이트 모드 (기본값 = :root)
   ============================================================ */
:root {
    /* --- 폰트 --- */
    --font-body:  'Pretendard', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans', sans-serif;
    --font-title: 'Noto Serif KR', 'Noto Serif SC', 'Noto Serif JP', serif;

    /* --- Primary / Secondary --- */
    --primary:          #8B5CF6;
    --primary-light:    #A78BFA;
    --primary-dark:     #7C3AED;
    --secondary:        #EC4899;
    --secondary-light:  #F472B6;
    --primary-gradient: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);

    /* --- Accent --- */
    --accent-mint:   #34D399;
    --accent-sky:    #38BDF8;
    --accent-yellow: #FBBF24;
    --accent-red:    #EF4444;

    /* --- Semantic status --- */
    --success: #10B981;
    --warning: #F59E0B;
    --error:   #EF4444;

    /* --- Background --- */
    --bg-main:    #F8F9FC;
    --bg-card:    #FFFFFF;
    --bg-section: #F3F4F8;
    --bg-light:   #F3F4F8;
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* --- Text --- */
    --text-primary:   #1F2937;
    --text-secondary: #6B7280;
    --text-muted:     #9CA3AF;
    --text-subtle:    #9CA3AF;
    --text-light:     #FFFFFF;

    /* --- Border --- */
    --border-light: #E5E7EB;
    --border-card:  rgba(139, 92, 246, 0.1);
    --border-input: #D1D5DB;

    /* --- Shadow --- */
    --shadow-card:       0 2px 12px rgba(139, 92, 246, 0.08);
    --shadow-card-hover: 0 8px 24px rgba(139, 92, 246, 0.15);
    --shadow-soft:       0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-button:     0 4px 15px rgba(139, 92, 246, 0.3);

    /* --- Spacing --- */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

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

    /* --- Typography scale --- */
    --text-xs:   10px;
    --text-sm:   12px;
    --text-base: 14px;
    --text-lg:   16px;
    --text-xl:   18px;
    --text-2xl:  24px;
    --text-3xl:  32px;

    /* --- Transitions --- */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* --- Layout --- */
    --nav-height:        60px;
    --bottom-nav-height: 64px;
}

/* ============================================================
   2. 다크 모드  (html.dark)
   ============================================================ */
html.dark {
    --bg-main:    #0F0F1E;
    --bg-card:    rgba(42, 45, 60, 0.7);
    --bg-section: #1A1A2E;
    --bg-light:   #1A1A2E;
    --bg-overlay: rgba(0, 0, 0, 0.8);

    --text-primary:   #F5F5F5;
    --text-secondary: #B8B8B8;
    --text-muted:     #8B8B8B;
    --text-subtle:    #8B8B8B;
    --text-light:     #1F2937;

    --border-light: rgba(255, 255, 255, 0.1);
    --border-card:  rgba(139, 92, 246, 0.2);
    --border-input: rgba(255, 255, 255, 0.2);

    --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 24px rgba(139, 92, 246, 0.25);
    --shadow-soft:       0 4px 20px rgba(0, 0, 0, 0.2);

    --primary-gradient: linear-gradient(135deg, #A78BFA 0%, #F472B6 100%);
}

/* ============================================================
   3. Base
   ============================================================ */
body {
    font-family: var(--font-body);
    background: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
}

/* ============================================================
   4. 레거시 별칭 (기존 페이지 하위 호환)
   구 design-system.css / theme-*.css 에서 쓰던 변수명을
   새 토큰으로 매핑 → 페이지 수정 없이 동작.
   신규 코드에서는 §1 의 표준 변수만 사용하세요.
   ============================================================ */
:root {
    /* design-system.css 계열 */
    --text-main:            var(--text-primary);
    --text-white:           var(--text-light);
    --card-bg:              var(--bg-card);
    --card-bg-translucent:  rgba(255, 255, 255, 0.8);
    --card-border:          var(--border-card);
    --background-light:     var(--bg-main);
    --font-display:         var(--font-body);
    --shadow-sm:            var(--shadow-soft);
    --shadow-md:            var(--shadow-card);
    --shadow-lg:            var(--shadow-card-hover);
    --shadow-xl:            var(--shadow-card-hover);
    --shadow-pastel:        var(--shadow-card-hover);

    /* theme-light.css 계열 */
    --bg-navy:       var(--bg-main);
    --bg-dark:       var(--bg-card);
    --card-bg-hover: var(--bg-card);
}
html.dark {
    --card-bg:             var(--bg-card);
    --card-bg-translucent: rgba(42, 45, 60, 0.7);
}

/* ============================================================
   4b. 다크 모드 컴포넌트 오버라이드 (theme-dark.css 흡수)
   → theme-dark.css 는 이제 삭제 가능.
   ============================================================ */
html.dark body { background: var(--bg-main); color: var(--text-primary); }

html.dark .header-bg,
html.dark .bottom-nav,
html.dark [class*="bottom-nav"] {
    background: rgba(15, 15, 30, 0.95) !important;
    backdrop-filter: blur(10px);
}

html.dark .service-card,
html.dark .modal-content,
html.dark [class*="modal-content"] {
    background: var(--bg-card);
    border-color: var(--border-card);
}

html.dark .category-tab {
    background: var(--bg-section);
    color: var(--text-secondary);
}
html.dark .category-tab.active {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    color: #fff;
}

html.dark input,
html.dark select,
html.dark textarea {
    background: var(--bg-section);
    color: var(--text-primary);
    border-color: var(--border-light);
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--text-muted); }

html.dark .btn-secondary,
html.dark [class*="btn-secondary"] {
    background: rgba(139, 92, 246, 0.15);
    color: var(--primary-light);
}

html.dark ::-webkit-scrollbar-track { background: var(--bg-section); }
html.dark ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); }

html.dark .fortune-hero {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1));
}
html.dark .rolling-banner-wrapper { background: var(--bg-card); }

/* ============================================================
   5. 유틸리티 클래스 (variables.css 에서 이관)
   ============================================================ */
.text-primary            { color: var(--text-primary); }
.text-secondary          { color: var(--text-secondary); }
.text-muted              { color: var(--text-muted); }
.text-accent-primary     { color: var(--primary); }
.text-accent-secondary   { color: var(--secondary); }
.text-error              { color: var(--accent-red); }
.text-success            { color: var(--accent-mint); }

.bg-main    { background-color: var(--bg-main); }
.bg-card    { background-color: var(--bg-card); }
.bg-section { background-color: var(--bg-section); }

.text-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hidden  { display: none !important; }
.visible { display: block; }

.screen        { display: none !important; }
.screen.active { display: flex !important; flex-direction: column; }