/**
 * K-POPSTAY — Premium Craft tokens (Wehome SSOT mirror)
 * Source: docs/design-md/toss.md · wh-tokens.css
 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2.0.1/fonts/variable/woff2/SUIT-Variable.css");

:root {
  color-scheme: light;

  --wh-ff: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wh-ff-display: "SUIT Variable", SUIT, var(--wh-ff);
  --wh-ff-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --wh-text-hero: 2rem;
  --wh-text-section: 1.375rem;
  --wh-text-title: 1rem;
  --wh-text-lg: 1.0625rem;
  --wh-text-base: 1rem;
  --wh-text-sm: 0.875rem;
  --wh-text-xs: 0.75rem;
  --wh-lh-tight: 1.14;
  --wh-lh-body: 1.5;
  --wh-tracking-body: -0.02em;
  --wh-tracking-title: -0.03em;

  --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: 56px;

  --wh-bg: #f2f4f6;
  --wh-bg-gutter: #d5d8dd;
  --wh-card: #ffffff;
  --wh-surface: #f4f5f7;
  --wh-tx: #191f28;
  --wh-tx2: #4e5968;
  --wh-tx3: #66707d;
  --wh-bd: rgba(0, 0, 0, 0.06);
  --wh-bd-input: rgba(0, 0, 0, 0.42);
  --wh-divider: #f2f4f6;

  --wh-brand: #681DC7;
  --wh-brand-hover: #5416A3;
  --wh-brand-tint: #F3EEFA;
  --wh-brand-soft: rgba(104, 29, 199, 0.12);
  --wh-focus-ring: var(--wh-brand);
  --wh-ink: #333d4b;
  --wh-ink-hover: #191f28;
  --wh-link: #0071e3;

  --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: #F3EEFA;
  --wh-info-bd: #D9CCF0;

  --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;

  --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);
  --wh-shadow-listing: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 2px 6px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06);
  --wh-shadow-listing-hover: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.08);

  --wh-motion-instant: 120ms;
  --wh-motion-fast: 180ms;
  --wh-motion-base: 260ms;
  --wh-motion-hover: var(--wh-motion-instant);
  --wh-motion-state: var(--wh-motion-fast);
  --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-press: cubic-bezier(0.4, 0, 0.2, 1);
  --wh-scale-press: 0.96;

  --wh-max-page: 1120px;
  --wh-touch-min: 44px;
  --wh-touch-cta: 48px;
  --wh-z-sticky: 200;
  --wh-z-dropdown: 100;
  --wh-z-overlay: 9000;

  /* Legacy aliases (existing class names) */
  --purple: var(--wh-brand);
  --purple-mid: var(--wh-brand);
  --purple-dark: var(--wh-brand-hover);
  --purple-deep: var(--wh-brand-hover);
  --purple-light: var(--wh-brand-tint);
  --purple-xlight: var(--wh-brand-tint);
  --purple-200: var(--wh-info-bd);
  --gold: var(--wh-warn-tx);
  --gold-light: var(--wh-warn-bg);
  --bg: var(--wh-bg);
  --bg-white: var(--wh-card);
  --text-900: var(--wh-tx);
  --text-700: var(--wh-tx2);
  --text-500: var(--wh-tx2);
  --text-300: var(--wh-tx3);
  --border: var(--wh-bd);
  --shadow-md: var(--wh-shadow-listing);
  --r: var(--wh-radius-xs);
}

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