/* styles/tokens.css — 가맹점숲 디자인 토큰 (블라인드 × 오르비 × 프리미엄)
   다른 CSS 보다 먼저 로드되어야 함. */

:root {
  /* ---- 색상 (다크 기본) ---- */
  --bg: #0b1020;
  --surface: #121a33;
  --surface-2: #1a2444;
  --surface-3: #222d55;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);
  --text: #e8ecf5;
  --text-strong: #ffffff;
  --muted: #9aa3b8;
  --primary: #6366f1;
  --primary-2: #818cf8;
  --primary-ink: #ffffff;
  --accent: #22d3ee;
  --danger: #ef4444;
  --warn: #f59e0b;
  --ok: #10b981;

  --overlay: rgba(5, 8, 20, .72);
  --glass: rgba(18, 26, 51, .72);

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Typography ---- */
  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple SD Gothic Neo", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 12px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-44: 44px;

  --fw-400: 400;
  --fw-500: 500;
  --fw-700: 700;

  --lh-tight: 1.4;
  --lh-base: 1.6;
  --lh-prose: 1.75;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .35);
  --shadow-3: 0 6px 16px rgba(0, 0, 0, .5), 0 32px 80px rgba(0, 0, 0, .45);

  /* ---- Layout ---- */
  --maxw: 1200px;
  --header-h: 64px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---- Z-index layers ---- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #f1f3f9;
  --surface-3: #e5e9f4;
  --border: rgba(10, 14, 30, .08);
  --border-strong: rgba(10, 14, 30, .16);
  --text: #0b1020;
  --text-strong: #000000;
  --muted: #51607a;
  --primary: #4f46e5;
  --primary-2: #6366f1;
  --primary-ink: #ffffff;
  --overlay: rgba(10, 14, 30, .48);
  --glass: rgba(255, 255, 255, .78);
  --shadow-1: 0 1px 2px rgba(10, 14, 30, .06), 0 8px 24px rgba(10, 14, 30, .08);
  --shadow-2: 0 2px 6px rgba(10, 14, 30, .08), 0 16px 40px rgba(10, 14, 30, .10);
  --shadow-3: 0 6px 16px rgba(10, 14, 30, .10), 0 32px 80px rgba(10, 14, 30, .14);
  color-scheme: light;
}

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

:focus-visible {
  outline: 2px solid var(--primary-2);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}