/**
 * Wehome Toss-style design tokens (SSOT)
 * Docs: docs/design-md/toss.md · admin-dashboard.md · legacy-bridge.md
 *
 * Usage: @import url('/assets/css/wh-tokens.css'); or link in layout
 * Do NOT redefine --wh-brand in page-scoped :root (breaks global brand)
 * Changelog: docs/design-md/toss.md (상단)
 */

:root {
  /* ── Typography ── */
  --wh-ff: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --wh-ff-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --wh-text-hero: 2rem;       /* 32px — mobile hero; desktop 2.5rem override OK */
  --wh-text-section: 1.375rem; /* 22px */
  --wh-text-title: 1rem;       /* 16px card title */
  --wh-text-lg: 1.0625rem;     /* 17px */
  --wh-text-base: 1rem;        /* 16px body */
  --wh-text-sm: 0.875rem;      /* 14px */
  --wh-text-xs: 0.75rem;       /* 12px caption / KPI label */
  --wh-text-kpi: 1.75rem;      /* 28px KPI value */

  --wh-lh-tight: 1.14;
  --wh-lh-body: 1.47;
  --wh-tracking-body: -0.02em;
  --wh-tracking-title: -0.03em;

  /* ── Spacing (8px base) ── */
  --wh-space-xs: 8px;
  --wh-space-sm: 12px;
  --wh-space-md: 16px;
  --wh-space-lg: 20px;
  --wh-space-xl: 24px;
  --wh-space-2xl: 28px;
  --wh-space-3xl: 32px;
  --wh-space-4xl: 40px;
  --wh-space-5xl: 48px;
  --wh-space-section: 72px;

  /* ── Surface & text ── */
  --wh-bg: #f2f4f6;
  --wh-bg-gutter: #d5d8dd;
  --wh-card: #ffffff;
  --wh-surface: #f4f5f7;
  --wh-tx: #191f28;
  --wh-tx2: #4e5968;
  --wh-tx3: #8b95a1;
  --wh-bd: rgba(0, 0, 0, 0.06);
  --wh-divider: #f2f4f6;

  /* Legacy label aliases (style_common 호환 — 신규는 --wh-tx* 사용) */
  --wh-label: var(--wh-tx);
  --wh-label-2: var(--wh-tx2);
  --wh-label-3: var(--wh-tx3);
  --wh-label-4: #b0b8c1;

  /* ── Brand ── */
  --wh-brand: #6800cd;
  --wh-brand-hover: #5700aa;
  --wh-brand-tint: #f3eefb;
  --wh-brand-soft: rgba(104, 0, 205, 0.12);
  --wh-ink: #333d4b;
  --wh-ink-hover: #191f28;
  --wh-link: #0071e3;

  /* ── Semantic ── */
  --wh-ok: #0f766e;
  --wh-ok-bg: #ecfdf5;
  --wh-ok-bd: #a7f3d0;
  --wh-warn-bg: #fffbeb;
  --wh-warn-bd: #fde68a;
  --wh-warn-tx: #92400e;
  --wh-err-bg: #fef2f2;
  --wh-err-bd: #fecaca;
  --wh-err-tx: #b91c1c;
  --wh-info-bg: #f3eefb;
  --wh-info-bd: #ddd0f5;

  /* ── Radius — soft round (2026-07) ── */
  --wh-radius-xs: 12px;
  --wh-radius-sm: 16px;
  --wh-radius-md: 20px;
  --wh-radius-lg: 24px;
  --wh-radius-xl: 28px;
  --wh-radius-btn: 18px;
  --wh-radius-pill: 999px;

  /* ── Elevation ── */
  --wh-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --wh-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06);
  --wh-shadow-card: var(--wh-shadow);

  /* ── Motion (Apple spring — docs/design-md/motion.md) ── */
  --wh-motion-instant: 120ms;
  --wh-motion-fast: 180ms;
  --wh-motion-base: 260ms;
  --wh-motion-slow: 380ms;
  --wh-motion-sheet: 480ms;
  --wh-motion-enter: 520ms;
  --wh-motion-hero: 900ms;
  --wh-ease-spring: cubic-bezier(0.34, 1.28, 0.64, 1);
  --wh-ease-spring-soft: cubic-bezier(0.22, 1.08, 0.36, 1);
  --wh-ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --wh-ease-in-out-smooth: cubic-bezier(0.45, 0, 0.55, 1);
  --wh-ease-press: cubic-bezier(0.4, 0, 0.2, 1);
  --wh-scale-press: 0.96;
  --wh-scale-press-deep: 0.92;

  /* ── Layout ── */
  --wh-max-mobile-shell: 720px;
  --wh-max-consumer: 960px;
  --wh-max-admin: 1080px;
  --wh-max-desktop: 1240px;
  --wh-bp-mobile: 640px;
  --wh-bp-tablet: 980px;
  --wh-bp-desktop-lock: 1024px;

  /* ── Z-index scale ── */
  --wh-z-dropdown: 100;
  --wh-z-sticky: 200;
  --wh-z-overlay: 9000;
  --wh-z-modal: 10000;
  --wh-z-toast: 11000;

  /* ── Icons (Material Symbols Rounded) ── */
  --wh-icon-sm: 20px;
  --wh-icon-md: 24px;
  --wh-icon-lg: 40px;

  /* ── Admin channel accent (override with data-mkt-channel) ── */
  --mkt-accent: var(--wh-brand);
}

[data-mkt-channel="naver"] { --mkt-accent: #03c75a; }
[data-mkt-channel="google_ads"] { --mkt-accent: #4285f4; }
[data-mkt-channel="google_hotels"] { --mkt-accent: #188038; }
[data-mkt-channel="kakao_moment"] { --mkt-accent: #d4a017; }

@media (min-width: 1024px) {
  :root {
    --wh-text-hero: 2.5rem;
  }
}