/* ============================================================
   tokens.css — Fitrip 모든 디자인 토큰 (CSS 변수만, 렌더 규칙 없음)
   shadcn HSL 토큰 + 별칭 + Fitrip v2 페이지 토큰(--ft-*).
   변수만 담으므로 어떤 페이지가 링크해도 라이트 외관 불변.
   ============================================================ */

:root {
    color-scheme: light;

    /* ── 1-1. shadcn 표준 토큰 (HSL 채널값) ──────────────── */
    --background:            42 33% 95%;       /* #f6f2ea */
    --foreground:            220 18% 11%;      /* #171c21 */

    --card:                  0 0% 100%;        /* #ffffff */
    --card-foreground:       220 18% 11%;      /* #171c21 */

    --popover:               0 0% 100%;        /* #ffffff */
    --popover-foreground:    220 18% 11%;      /* #171c21 */

    --primary:               189 100% 43%;     /* #00bbdd */
    --primary-foreground:    196 100% 12%;     /* #003845 */
    --primary-text:          189 100% 29%;     /* #007e94 */
    --primary-hover:         189 100% 36%;     /* #009ab8 */

    --secondary:             42 23% 92%;       /* #eee8dc */
    --secondary-foreground:  220 18% 11%;      /* #171c21 */

    --muted:                 40 18% 88%;       /* #e4ddd0 */
    --muted-foreground:      220 10% 35%;      /* #515862 */

    --accent-hsl:            29 84% 65%;       /* #f0ac5d */
    --accent-foreground:     220 18% 11%;      /* #171c21 */

    --destructive:           354 74% 60%;      /* #e55f6d */
    --destructive-foreground: 0 0% 100%;       /* #ffffff */

    --input:                 36 14% 78%;       /* #cec4b6 */
    --ring:                  189 100% 43%;     /* #00bbdd */
    --radius:                0.625rem;         /* 10px */

    /* ── 1-3. 시맨틱 상태 (HSL 채널값) ──────────────────── */
    --success-hsl:           145 42% 46%;      /* #4aa86d */
    --success-foreground:    0 0% 100%;
    --warning-hsl:           32 83% 63%;       /* #efa45a */
    --warning-foreground:    220 18% 11%;
    --danger-hsl:            354 74% 60%;      /* #e55f6d */
    --danger-foreground:     0 0% 100%;

    /* ── 1-4. 텍스트 단계 (HSL 채널값) ──────────────────── */
    --text-primary-hsl:      220 18% 11%;      /* = foreground */
    --text-secondary-hsl:    220 10% 35%;      /* #515862 */
    --text-muted-hsl:        220 8% 55%;       /* #838993 */

    /* ── 1-5. 표면 단계 (HSL 채널값) ────────────────────── */
    --surface:               0 0% 100%;        /* = card */
    --surface-2:             42 23% 92%;       /* = secondary */
    --surface-3:             40 18% 88%;       /* = muted */

    /* ── 1-6. Radius 스케일 ─────────────────────────────── */
    --radius-sm:             0.625rem;         /* 10px */
    --radius-md:             0.875rem;         /* 14px */
    --radius-lg:             1.25rem;          /* 20px */
    --radius-xl:             var(--radius-lg); /* v2: 10 / 14 / 20 / full */
    --radius-full:           999px;
    --radius-pill:           999px;

    /* ── 1-7. Spacing Scale (4px 기반) ──────────────────── */
    --space-1:               0.25rem;          /* 4px */
    --space-2:               0.5rem;           /* 8px */
    --space-3:               0.75rem;          /* 12px */
    --space-4:               1rem;             /* 16px */
    --space-5:               1.25rem;          /* 20px */
    --space-6:               1.5rem;           /* 24px */
    --space-8:               2rem;             /* 32px */
    --space-10:              2.5rem;           /* 40px */
    --space-12:              3rem;             /* 48px */
    --space-16:              4rem;             /* 64px */

    /* ── 1-8. 레이아웃 ──────────────────────────────────── */
    --navbar-h:              52px;
    --z-toast:               9000;
    --z-modal:               9999;

    /* ── 1-9. 애니메이션 ────────────────────────────────── */
    --duration-fast:         0.15s;
    --duration-normal:       0.30s;
    --duration-slow:         0.50s;

    /* ── 1-10. 타이포그래피 ─────────────────────────────── */
    --font-sans:             'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display:          'Instrument Serif', 'Times New Roman', serif;
    --font-mono:             'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    --font-body-weight:      400;
    --line-height-body:      1.6;
    --letter-spacing-heading: -0.02em;
    --letter-spacing-label:  0.06em;

    /* [P2 dead var] --sidebar-*, --chart-* (shadcn 호환 토큰) 제거됨
       — 사용처 0 (grep 검증: 2026-05-29). 사이드바/차트 도입 시 재추가 */

    /* ── 1-15. 하위 호환 별칭 (기존 컴포넌트 대응) ──────── */
    /* shadcn HSL 토큰에서 파생 — 단일 소스로 양쪽 호환 */

    /* 브랜드 */
    --brand:         hsl(var(--primary));
    --brand-hover:   hsl(var(--primary-hover));
    --brand-soft:    hsl(var(--primary) / 0.10);
    /* [P1 token consistency] --brand-text는 브랜드 시안/잉크 배경 위 텍스트 색.
       --primary-foreground(196 100% 12% = #003845)와 달리 흰색이 의도임 — 버튼·뱃지·아이콘용.
       tokens.css에 --on-brand: #ffffff 토큰 추가 후 var(--on-brand)으로 일원화 권고. */
    --brand-text:    #ffffff;

    /* 보조 색상 */
    --accent:        hsl(var(--accent-hsl));

    /* 시맨틱 상태 (해석값) */
    --success:         hsl(var(--success-hsl));
    --success-bg:      hsl(var(--success-hsl) / 0.10);
    --success-border:  hsl(var(--success-hsl) / 0.30);
    --warning:         hsl(var(--warning-hsl));
    --warning-bg:      hsl(var(--warning-hsl) / 0.10);
    --warning-border:  hsl(var(--warning-hsl) / 0.30);
    --danger:          hsl(var(--danger-hsl));
    --danger-bg:       hsl(var(--danger-hsl) / 0.06);
    --danger-border:   hsl(var(--danger-hsl) / 0.25);
    --danger-shadow:   hsl(var(--danger-hsl) / 0.28);
    --overlay-scrim:   hsl(var(--foreground) / 0.42);
    --media-scrim:     hsl(var(--foreground) / 0.58);
    --on-brand-soft:   hsl(0 0% 100% / 0.16);
    --on-brand-muted:  hsl(0 0% 100% / 0.84);
    --scrollbar-thumb:        var(--line-2);
    --scrollbar-thumb-hover:  hsl(var(--foreground) / 0.24);
    --scrollbar-thumb-active: hsl(var(--foreground) / 0.32);

    /* 배경 */
    --bg-body:       hsl(var(--background));
    --bg-surface:    hsl(var(--card));
    --bg-surface-2:  hsl(var(--secondary));
    --bg-surface-3:  hsl(var(--muted));
    --bg-navbar:     hsl(var(--background));
    --bg:            var(--bg-surface);
    --bg-soft:       var(--bg-body);
    --bg-tint:       var(--bg-surface-2);

    /* 텍스트 */
    --text-1:        hsl(var(--foreground));
    --text-2:        hsl(var(--text-secondary-hsl));
    --text-3:        hsl(var(--text-muted-hsl));
    --ink:           var(--text-1);
    --ink-2:         var(--text-2);
    --ink-3:         var(--text-3);

    /* 테두리 */
    --border:        hsl(36 16% 82%);
    --border-strong: hsl(var(--input));
    --line:          var(--border);
    --line-2:        var(--border-strong);

    /* 그림자 — soft elevation */
    --shadow-line:    0 0 0 1px var(--line);
    --shadow-sm:      0 1px 2px rgba(20,22,30,0.04), 0 2px 8px -3px rgba(20,22,30,0.06);
    --shadow-md:      0 1px 2px rgba(20,22,30,0.04), 0 8px 24px -12px rgba(20,22,30,0.10);
    --shadow-lg:      0 1px 2px rgba(20,22,30,0.04), 0 24px 48px -20px rgba(20,22,30,0.14);
    --shadow-brand:    var(--shadow-md);
    --shadow-brand-sm: var(--shadow-sm);
    --shadow-brand-lg: var(--shadow-lg);
    --focus-ring:      0 0 0 3px hsl(var(--ring) / 0.16);  /* 입력 포커스 글로우 */

    /* 시맨틱 그림자 */
    --shadow-danger:     0 1px 2px rgba(20, 24, 31, 0.05), 0 12px 24px -18px rgba(229, 95, 109, 0.28);
    --shadow-danger-md:  0 1px 2px rgba(20, 24, 31, 0.05), 0 20px 40px -18px rgba(229, 95, 109, 0.30);
    --shadow-warning:    0 1px 2px rgba(20, 24, 31, 0.05), 0 12px 24px -18px rgba(239, 164, 90, 0.22);
    --shadow-success:    0 1px 2px rgba(20, 24, 31, 0.05), 0 12px 24px -18px rgba(74, 168, 109, 0.22);
    --shadow-success-md: 0 1px 2px rgba(20, 24, 31, 0.05), 0 20px 40px -18px rgba(74, 168, 109, 0.24);

    /* v2 component tokens — 10 / 14 / 20 / full radius system */
    --control-h-sm:       2.5rem;   /* 40px */
    --control-h:          3rem;     /* 48px */
    --control-h-md:       3.25rem;  /* 52px */
    --control-h-lg:       3.5rem;   /* 56px */
    --control-h-xl:       4.25rem;  /* 68px */
    --button-h:           2.625rem; /* 42px */
    --topbar-action-h:    2.25rem;  /* 36px */
    --control-radius:     var(--radius-full);
    --field-h:            3.5rem;   /* 56px */
    --field-radius:       var(--radius-lg);
    --surface-radius:     var(--radius-lg);
    --card-radius:        var(--radius-lg);
    --item-radius:        var(--radius-md);
    --chip-radius:        var(--radius-full);
    --icon-radius:        var(--radius-full);
    --menu-radius:        var(--radius-lg);
    --menu-item-radius:   var(--radius-md);
    --media-bg:           var(--bg-tint);
    --media-fg:           var(--ink);
    /* 카테고리 썸네일 그라데이션 (디자인 방향 v2 Pattern A thumb 컨셉) */
    --grad-warm:          linear-gradient(135deg, #ffeed0 0%, #ffd3a5 100%);
    --grad-cyan:          linear-gradient(135deg, #c9eef5 0%, #00bbdd 100%);
    --grad-pink:          linear-gradient(135deg, #ffd3d8 0%, #ff7e8a 100%);
    --grad-green:         linear-gradient(135deg, #d8e8c8 0%, #7eb88f 100%);
    --grad-amber:         linear-gradient(135deg, #ffeed0 0%, #ffb878 100%);  /* dcard .ph 기본 */
    --grad-gold:          linear-gradient(135deg, #efe2c4 0%, #c9a96b 100%);  /* dcard.e / trip.paris */
    --grad-blue:          linear-gradient(135deg, #c9d6f5 0%, #6f86c4 100%);  /* dcard.f */
    --grad-rose:          linear-gradient(135deg, #ffd3d8 0%, #ff5d6c 100%);  /* 선택목록 thumb.c */
    /* 사진 위 스크림·반투명 칩·별점 — 페이지 로컬 raw 값 중앙화 */
    --scrim-card:         linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%);
    --scrim-cover:        linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.32) 100%);
    --glass-light:        rgba(255,255,255,0.92);
    --rating-star:        #f4a261;
    /* 활동 보조 팔레트 (v2 — DESIGN.md: Day/상태/오버레이 색은 보조 팔레트 별도) */
    --act-cafe-hsl:       24 40% 44%;     /* 차분한 모카 — cafe (danger 빨강과 구분) */
    --act-shopping-hsl:   286 26% 52%;    /* 차분한 플럼 — shopping (cafe/danger와 구분) */
    --act-restaurant:     var(--accent);
    --act-cafe:           hsl(var(--act-cafe-hsl));
    --act-cafe-bg:        hsl(var(--act-cafe-hsl) / 0.09);
    --act-cafe-border:    hsl(var(--act-cafe-hsl) / 0.28);
    --act-accommodation:  var(--brand);
    --act-shopping:       hsl(var(--act-shopping-hsl));
    --act-shopping-bg:    hsl(var(--act-shopping-hsl) / 0.09);
    --act-shopping-border: hsl(var(--act-shopping-hsl) / 0.28);

    /* 브랜드 알파 유틸리티 — 실제 사용되는 값만 유지 */
    --brand-10: hsl(var(--primary) / 0.10);
    --brand-20: hsl(var(--primary) / 0.20);
    --brand-25: hsl(var(--primary) / 0.25);
    --brand-50: hsl(var(--primary) / 0.50);

    /* 선택/hover 상태 전용 — 웜 뉴트럴 표면색을 인터랙션 피드백에 쓰지 않음 */
    --selection-surface: hsl(var(--primary) / 0.045);
    --selection-hover-bg: hsl(var(--primary) / 0.08);
    --selection-active-bg: hsl(var(--primary) / 0.14);
    --selection-active-border: hsl(var(--primary) / 0.30);
    --selection-active-text: hsl(var(--primary-text));

    /* ── Fitrip v2 페이지 색 토큰 (--ft-*) ───────────────── */
    --ft-bg:          #ffffff;
    --ft-surface:     #ffffff;
    --ft-surface-2:   #fbfdfe;
    --ft-chip:        #f2f7f9;
    --ft-cyan-soft:   #e6f8fc;
    --ft-glow:        #ecf9fc;
    --ft-ink:         #0d1b22;
    --ft-ink-2:       #4a5860;
    --ft-muted:       #8a97a0;
    --ft-faint:       #c4cdd2;
    --ft-border:      #eef2f4;
    --ft-border-2:    #e3ecef;
    --ft-cyan-text:   #007e94;
    --ft-cyan-border: #9fdfee;
    --ft-path:        #cdeef6;
    --ft-bar:         #d4eef5;
    --ft-map-bg:      #e7eef0;
    --ft-map-grid:    #ffffff;
    --ft-cta-bg:      #0d1b22;
    --ft-header-bg:   rgba(255,255,255,0.86);
    --ft-ok-soft:     #e9f8ee;
    --ft-ok-text:     #2e7d4f;
}

[data-theme="dark"] {
    color-scheme: dark;

    /* ── shadcn 표준 오버라이드 (v3: 시안 중립 다크 팔레트) ── */
    --background:            240 6% 4%;        /* #0a0a0b */
    --foreground:            240 3% 93%;       /* #ededee */

    --card:                  240 4% 9%;        /* #161618 */
    --card-foreground:       240 3% 93%;       /* #ededee */

    --popover:               240 4% 9%;        /* #161618 */
    --popover-foreground:    240 3% 93%;       /* #ededee */

    --primary-foreground:    222 65% 7%;       /* #080e1d */
    /* 다크에서 브랜드 텍스트/링크는 밝은 시안으로 (다크 배경 가독성) */
    --primary-text:          191 79% 59%;      /* #43cdeb */

    --secondary:             240 4% 13%;       /* #202023 */
    --secondary-foreground:  240 3% 93%;       /* #ededee */

    --muted:                 240 4% 19%;       /* #2e2e32 */
    --muted-foreground:      240 4% 62%;       /* #9b9ba1 */

    --accent-hsl:            32 72% 62%;       /* #e7a964 */
    --accent-foreground:     220 18% 11%;

    --destructive:           354 78% 66%;      /* #eb6877 */
    --destructive-foreground: 0 0% 100%;

    --input:                 240 4% 30%;       /* #494950 */
    --ring:                  189 100% 43%;

    /* ── 시맨틱 상태 — 다크 ─────────────────────────────── */
    --danger-hsl:            354 78% 66%;      /* #eb6877 */

    /* 활동 보조 팔레트 — 다크 (라이트보다 밝게) */
    --act-cafe-hsl:          26 45% 62%;
    --act-shopping-hsl:      286 32% 70%;

    /* ── 텍스트 단계 — 다크 ─────────────────────────────── */
    --text-primary-hsl:      240 3% 93%;
    --text-secondary-hsl:    240 3% 69%;       /* #aeaeb3 */
    --text-muted-hsl:        240 4% 56%;       /* #8c8c93 */

    /* ── 표면 단계 — 다크 ───────────────────────────────── */
    --surface:               240 4% 9%;        /* #161618 */
    --surface-2:             240 4% 13%;       /* #202023 */
    --surface-3:             240 4% 19%;       /* #2e2e32 */

    /* ── 기존 호환 별칭 — 다크 오버라이드 ───────────────── */
    --brand-soft:    hsl(var(--primary) / 0.14);
    /* [P1 token consistency] 라이트와 동일 의도 — 다크에서도 브랜드/잉크 배경 위 흰 텍스트. */
    --brand-text:    #ffffff;

    --success-bg:      hsl(var(--success-hsl) / 0.12);
    --success-border:  hsl(var(--success-hsl) / 0.25);
    --warning-bg:      hsl(var(--warning-hsl) / 0.12);
    --warning-border:  hsl(var(--warning-hsl) / 0.25);
    --danger-bg:       hsl(var(--danger-hsl) / 0.10);
    --danger-border:   hsl(var(--danger-hsl) / 0.30);
    --danger-shadow:   hsl(var(--danger-hsl) / 0.20);
    --overlay-scrim:   hsl(0 0% 0% / 0.46);
    --media-scrim:     hsl(0 0% 0% / 0.62);
    --on-brand-soft:   hsl(0 0% 100% / 0.14);
    --on-brand-muted:  hsl(0 0% 100% / 0.82);
    --scrollbar-thumb:        hsl(var(--foreground) / 0.14);
    --scrollbar-thumb-hover:  hsl(var(--foreground) / 0.26);
    --scrollbar-thumb-active: hsl(var(--foreground) / 0.32);

    --border:        hsl(240 5% 18%);         /* #2b2b30 */

    --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.28), 0 10px 24px -18px rgba(0, 0, 0, 0.40);
    --shadow-md:      0 1px 2px rgba(0, 0, 0, 0.30), 0 20px 48px -24px rgba(0, 0, 0, 0.46);
    --shadow-lg:      0 1px 2px rgba(0, 0, 0, 0.34), 0 36px 80px -28px rgba(0, 0, 0, 0.54);
    --shadow-brand:    var(--shadow-md);
    --shadow-brand-sm: var(--shadow-sm);
    --shadow-brand-lg: var(--shadow-lg);

    --shadow-danger:     0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 30px -18px rgba(235, 104, 119, 0.24);
    --shadow-danger-md:  0 1px 2px rgba(0, 0, 0, 0.28), 0 22px 44px -18px rgba(235, 104, 119, 0.26);
    --shadow-warning:    0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 30px -18px rgba(231, 169, 100, 0.20);
    --shadow-success:    0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 30px -18px rgba(74, 168, 109, 0.20);
    --shadow-success-md: 0 1px 2px rgba(0, 0, 0, 0.28), 0 22px 44px -18px rgba(74, 168, 109, 0.22);

    --selection-surface: hsl(var(--primary) / 0.10);
    --selection-hover-bg: hsl(var(--primary) / 0.16);
    --selection-active-bg: hsl(var(--primary) / 0.22);
    --selection-active-border: hsl(var(--primary) / 0.38);
    --selection-active-text: hsl(var(--primary));

    /* [P2 dead var] --sidebar-*, --chart-* 다크 오버라이드 제거됨 — 사용처 0 */

    /* ── Fitrip v2 페이지 색 토큰 — 다크 (중립) ──────────── */
    --ft-bg:          #0a0a0b;
    --ft-surface:     #161618;
    --ft-surface-2:   #161618;
    --ft-chip:        #202023;
    --ft-cyan-soft:   rgba(0,187,221,0.14);
    --ft-glow:        rgba(0,187,221,0.10);
    --ft-ink:         #ededee;
    --ft-ink-2:       #aeaeb3;
    --ft-muted:       #9b9ba1;
    --ft-faint:       #3c3c40;
    --ft-border:      #242427;
    --ft-border-2:    #2e2e32;
    --ft-cyan-text:   #43cdeb;
    --ft-cyan-border: #2a5a66;
    --ft-path:        rgba(0,187,221,0.30);
    --ft-bar:         #26262a;
    --ft-map-bg:      #161618;
    --ft-map-grid:    #2e2e32;
    --ft-cta-bg:      #060607;
    --ft-header-bg:   rgba(10,10,11,0.82);
    --ft-ok-soft:     rgba(46,125,79,0.20);
    --ft-ok-text:     #5fc98a;
}