/*
  YESKIM Design Tokens
  Use this file first in every website, web app, mobile web view, deck export, and promo template.
*/

:root,
[data-theme="light"] {
  --yk-ink: #1f1d19;
  --yk-ink-soft: #4a4740;
  --yk-ivory: #f7f4ef;
  --yk-paper: #fffdf9;
  --yk-stone: #dfd9cf;
  --yk-champagne: #b99a82;
  --yk-champagne-deep: #8d6e58;
  --yk-sage: #75806f;
  --yk-blue: #526d87;
  --yk-line: rgba(31, 29, 25, 0.13);
  --yk-surface: var(--yk-paper);
  --yk-surface-soft: var(--yk-ivory);
  --yk-text: var(--yk-ink);
  --yk-text-muted: var(--yk-ink-soft);
  --yk-accent: var(--yk-champagne);
  --yk-shadow: 0 22px 50px rgba(31, 29, 25, 0.12);
  --yk-shadow-soft: 0 10px 28px rgba(31, 29, 25, 0.08);

  --yk-radius-sm: 8px;
  --yk-radius-md: 18px;
  --yk-radius-lg: 34px;

  --yk-space-1: 4px;
  --yk-space-2: 8px;
  --yk-space-3: 12px;
  --yk-space-4: 16px;
  --yk-space-5: 24px;
  --yk-space-6: 32px;
  --yk-space-7: 48px;
  --yk-space-8: 72px;

  --yk-font-sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  --yk-font-hero: 900 clamp(44px, 7vw, 92px) / 0.95 var(--yk-font-sans);
  --yk-font-display: 850 clamp(34px, 4vw, 56px) / 1.05 var(--yk-font-sans);
  --yk-font-heading: 800 30px / 1.15 var(--yk-font-sans);
  --yk-font-title: 800 20px / 1.25 var(--yk-font-sans);
  --yk-font-body: 500 16px / 1.55 var(--yk-font-sans);
  --yk-font-label: 900 13px / 1.2 var(--yk-font-sans);
}

[data-theme="dark"] {
  --yk-ink: #f7f4ef;
  --yk-ink-soft: rgba(255, 253, 249, 0.72);
  --yk-ivory: #171612;
  --yk-paper: #201f1a;
  --yk-stone: rgba(255, 253, 249, 0.2);
  --yk-line: rgba(255, 253, 249, 0.16);
  --yk-champagne: #d3b79d;
  --yk-champagne-deep: #e3c9af;
  --yk-sage: #d7ded0;
  --yk-blue: #c7d7e6;
  --yk-surface: #201f1a;
  --yk-surface-soft: #171612;
  --yk-text: #fffdf9;
  --yk-text-muted: rgba(255, 253, 249, 0.72);
  --yk-accent: var(--yk-champagne);
  --yk-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  --yk-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}