/**
 * KDCA Mobile — Design Tokens
 * Phase L-40 (2026-05-14): Claude Design 통합 (dark-first + gold + cream)
 * Phase L-46 (2026-05-15): 공통 토큰(/app/assets/css/tokens.css) import — 흩어진 CSS 통일
 *
 * 디자인 컨셉: 정부/공공기관 신뢰감 + NFT 자산 프리미엄
 *   - Surfaces: warm-cool 다크 그라데이션 (5단계 depth ladder)
 *   - Brand: KDCA Gold (#c9a86a)
 *   - Text: Cream (#faf3e2)
 *   - Font: Pretendard
 *
 * 모드:
 *   - 기본 = dark (prefers-color-scheme 자동 + data-theme=dark 수동)
 *   - data-theme=light = light 모드 (베이지 톤)
 *
 * 호환성: 기존 토큰명 (--color-primary, --color-text 등) 모두 유지하여 기존 페이지 무손상.
 * 통일: 공통 구조 토큰(폰트/간격/radius/그림자/타이포)은 /app/assets/css/tokens.css 에서 import.
 *       모바일은 자체 색상(Gold dark theme) 만 유지.
 */

/* 공통 토큰 (Pretendard, 간격, radius, 그림자, 타이포 통일) */
@import url('/app/assets/css/tokens.css');

:root {
    /* ============================================================
     * Claude Design Tokens (Dark default) — 모바일 영역 전용 색상
     * 공통 토큰의 --kdca-* 은 위 import 에서 자동 로드됨
     * ============================================================ */

    /* === Surfaces (warm-cool depth ladder) === */
    --bg-0: #08070a;          /* 최심부 */
    --bg-1: #110f10;          /* 기본 표면 */
    --bg-2: #1a1714;          /* 카드 */
    --bg-3: #241f1a;          /* 강조 표면 */
    --bg-4: #2e2823;          /* 모달/팝오버 */
    --line: rgba(255,255,255,0.06);
    --line-2: rgba(255,255,255,0.12);
    --line-accent: rgba(201,168,106,0.22);

    /* === Foreground (cream) === */
    --fg-0: #faf3e2;          /* primary */
    --fg-1: #d8d2c5;          /* secondary */
    --fg-2: #8e887d;          /* tertiary */
    --fg-3: #5a5650;          /* quaternary */

    /* === Brand: KDCA Gold === */
    --accent: #c9a86a;
    --accent-soft: #e2c994;
    --accent-deep: #8a6a2e;
    --accent-bg: rgba(201,168,106,0.10);
    --accent-bg-strong: rgba(201,168,106,0.20);

    --ok:    #7ba89e;
    --ok-bg: rgba(123,168,158,0.14);
    --warn:  #d4b078;
    --err:   #c96a6a;
    --err-bg: rgba(201,106,106,0.14);
    --info:  #6a8ec9;

    /* === Radii (공통 토큰 alias) === */
    --radius:    var(--kdca-radius-md);
    --radius-sm: var(--kdca-radius-sm);
    --radius-lg: var(--kdca-radius-xl);
    --radius-xl: var(--kdca-radius-2xl);
    --card-radius: 14px;

    /* === Legacy 호환 (--color-* 그대로 유지) === */
    --color-primary: var(--accent);
    --color-text:    var(--fg-0);
    --color-bg:      var(--bg-1);
    --color-surface: var(--bg-2);
    --color-border:  var(--line);
    --color-muted:   var(--fg-2);

    /* === 모바일에서 공통 폰트 토큰 사용 ===
       이전: 모바일에서 자체 정의했던 폰트 변수들도 호환 보존 */
    --font:         var(--kdca-font);
    --font-mono:    var(--kdca-font-mono);
    --text-xs:      var(--kdca-text-xs);
    --text-sm:      var(--kdca-text-sm);
    --text-base:    var(--kdca-text-base);
    --text-lg:      var(--kdca-text-lg);
    --text-xl:      var(--kdca-text-xl);
    --text-2xl:     var(--kdca-text-2xl);

    /* === Spacing alias === */
    --space-1: var(--kdca-space-1);
    --space-2: var(--kdca-space-2);
    --space-3: var(--kdca-space-3);
    --space-4: var(--kdca-space-4);
    --space-5: var(--kdca-space-5);
    --space-6: var(--kdca-space-6);
    --space-8: var(--kdca-space-8);
}

/* ============================================================================
 * Light 모드 (베이지 톤)
 * ========================================================================== */
[data-theme="light"] {
    --bg-0: #f5efe1;
    --bg-1: #faf3e2;
    --bg-2: #ffffff;
    --bg-3: #efe7d2;
    --bg-4: #e6dec8;
    --line: rgba(0,0,0,0.08);
    --line-2: rgba(0,0,0,0.14);

    --fg-0: #2a2620;
    --fg-1: #5a5650;
    --fg-2: #8e887d;
    --fg-3: #b8b3a8;

    --color-primary: var(--accent);
    --color-text:    var(--fg-0);
    --color-bg:      var(--bg-1);
    --color-surface: var(--bg-2);
}

/* ============================================================================
 * 기본 body 톤 (모바일 영역만 적용 — html 전체가 아님)
 * ========================================================================== */
html, body {
    background: var(--bg-1);
    color: var(--fg-0);
    font-family: var(--kdca-font);
}

/* ============================================================================
 * 접근성: prefers-reduced-motion
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}