/*
 * 쿠폰고 폐쇠몰 — Design Tokens
 * 참조: closed-mall-app/DESIGN.md
 * 네임스페이스: cm- (메인 BK Go Console과 격리)
 */

:root {
    /* ---------- Brand ---------- */
    --cm-brand-600: #00894A;
    --cm-brand-500: #00A651;
    --cm-brand-400: #2EBE75;
    --cm-brand-100: #E6F7EE;

    /* ---------- Accent ---------- */
    --cm-blue-600:  #2563EB;
    --cm-blue-500:  #3B82F6;
    --cm-blue-100:  #E7F0FF;

    /* ---------- Neutral ---------- */
    --cm-ink-900:   #1F2937;
    --cm-ink-700:   #374151;
    --cm-ink-500:   #6B7280;
    --cm-ink-400:   #9CA3AF;
    --cm-line-200:  #E5E7EB;
    --cm-line-100:  #F1F3F5;
    --cm-bg:        #F5F7FA;
    --cm-surface:   #FFFFFF;

    /* ---------- Semantic ---------- */
    --cm-success:     #00A651;
    --cm-warning:     #F59E0B;
    --cm-danger:      #EF4444;
    --cm-info:        #3B82F6;
    --cm-success-bg:  #E6F7EE;
    --cm-warning-bg:  #FEF3C7;
    --cm-danger-bg:   #FEE2E2;
    --cm-info-bg:     #E7F0FF;

    /* ---------- Chart palette ---------- */
    --cm-chart-green: #00A651;
    --cm-chart-blue:  #3B82F6;
    --cm-chart-amber: #F59E0B;
    --cm-chart-gray:  #CBD5E1;
    --cm-chart-track: #F1F3F5;

    /* ---------- Spacing (4px base) ---------- */
    --cm-space-1:  4px;
    --cm-space-2:  8px;
    --cm-space-3:  12px;
    --cm-space-4:  16px;
    --cm-space-5:  20px;
    --cm-space-6:  24px;
    --cm-space-8:  32px;
    --cm-space-10: 40px;

    /* ---------- Radius ---------- */
    --cm-radius-sm:   6px;
    --cm-radius-md:   10px;
    --cm-radius-lg:   12px;
    --cm-radius-xl:   16px;
    --cm-radius-pill: 999px;

    /* ---------- Shadow (flat style: 거의 사용 안 함, modal/dropdown에만) ---------- */
    --cm-shadow-card:   none;
    --cm-shadow-raised: 0 2px 8px rgba(16, 24, 40, .06);
    --cm-shadow-modal:  0 20px 40px rgba(16, 24, 40, .18);

    /* ---------- Border (flat의 핵심) ---------- */
    --cm-border:        1px solid var(--cm-line-200);
    --cm-border-strong: 1px solid #DADFE5;

    /* ---------- Layout ---------- */
    --cm-sidebar-w: 240px;
    --cm-topbar-h:  64px;

    /* ---------- Typography ---------- */
    --cm-font-sans: "Pretendard Variable", Pretendard, "Noto Sans KR",
                    -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Universal reset ----------
   Bootstrap 없이도 디자인 시스템이 self-contained로 동작하도록 필수 리셋.
   content-box 기본값이면 width:100%인 input이 padding+border만큼 overflow 됨. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ---------- Base ---------- */
html, body {
    background: var(--cm-bg);
    color: var(--cm-ink-900);
    font-family: var(--cm-font-sans);
    font-size: 14px;
    line-height: 22px;
    font-feature-settings: "tnum" 1;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

a { color: var(--cm-blue-500); text-decoration: none; }
a:hover { color: var(--cm-blue-600); text-decoration: underline; }

/* ---------- Typography utility ---------- */
.cm-display     { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--cm-ink-900); }
.cm-h1          { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--cm-ink-900); }
.cm-h2          { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--cm-ink-900); }
.cm-h3          { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--cm-ink-900); }
.cm-kpi         { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--cm-ink-900); letter-spacing: -0.01em; }
.cm-kpi-sm      { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--cm-ink-900); }
.cm-body        { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--cm-ink-700); }
.cm-body-strong { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--cm-ink-900); }
.cm-caption     { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--cm-ink-500); }
.cm-caption-up  { font-size: 11px; line-height: 16px; font-weight: 600; color: var(--cm-ink-500);
                  text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Focus ring ---------- */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--cm-blue-500);
    outline-offset: 2px;
    border-radius: var(--cm-radius-sm);
}