/* 자동 생성 파일. 고치려면 tokens/tokens.json 을 고치고 node scripts/build-tokens.mjs 를 돌린다. */
:root {
  --color-white: #fefefe;
  --color-black: #0a0909;
  --color-gray-50: #faf9f9;
  --color-gray-100: #f5f3f2;
  --color-gray-200: #ece9e8;
  --color-gray-300: #dfdbda;
  --color-gray-400: #cbc5c4;
  --color-gray-500: #b3acaa;
  --color-gray-600: #958d8b;
  --color-gray-700: #756d6b;
  --color-gray-750: #6b6361;
  --color-gray-800: #534c4b;
  --color-gray-850: #3a3433;
  --color-gray-900: #211d1d;
  --color-gray-925: #2a2525;
  --color-gray-950: #161313;
  --color-orange-50: #fff4eb;
  --color-orange-100: #ffe6d1;
  --color-orange-200: #fdc9a0;
  --color-orange-300: #f9a86a;
  --color-orange-400: #f7913f;
  --color-orange-500: #f47b1a;
  --color-orange-600: #d9650c;
  --color-orange-700: #b85309;
  --color-orange-800: #8f410a;
  --color-orange-900: #6b320b;
  --color-green-50: #f0f9eb;
  --color-green-300: #b6e09a;
  --color-green-700: #338807;
  --color-red-50: #fdf0ec;
  --color-red-300: #f0b8a6;
  --color-red-700: #cb3c18;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-display: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-numeric: Manrope, "Pretendard Variable", Pretendard, sans-serif;
  --size-xs: 12px;
  --size-sm: 14px;
  --size-base: 16px;
  --size-lg: 18px;
  --size-xl: 20px;
  --size-2xl: 24px;
  --size-3xl: 28px;
  --size-4xl: 32px;
  --size-5xl: 36px;
  --size-6xl: 44px;
  --size-7xl: 52px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 80px;
  --space-6xl: 96px;
  --space-7xl: 128px;
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --type-display-size: clamp(2.25rem, 1.6rem + 3.2vw, 3.25rem);
  --type-display-leading: 1.2;
  --type-display-tracking: -0.03em;
  --type-display-weight: 700;
  --type-display-family: var(--font-display);
  --type-title-1-size: clamp(1.75rem, 1.45rem + 1.4vw, 2rem);
  --type-title-1-leading: 1.3;
  --type-title-1-tracking: -0.025em;
  --type-title-1-weight: 700;
  --type-title-1-family: var(--font-display);
  --type-title-2-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --type-title-2-leading: 1.35;
  --type-title-2-tracking: -0.02em;
  --type-title-2-weight: 700;
  --type-title-2-family: var(--font-display);
  --type-title-3-size: 1.25rem;
  --type-title-3-leading: 1.4;
  --type-title-3-tracking: -0.015em;
  --type-title-3-weight: 650;
  --type-title-3-family: var(--font-body);
  --type-body-lg-size: 1.125rem;
  --type-body-lg-leading: 1.7;
  --type-body-lg-tracking: -0.01em;
  --type-body-lg-weight: 450;
  --type-body-lg-family: var(--font-body);
  --type-body-size: 1rem;
  --type-body-leading: 1.7;
  --type-body-tracking: -0.01em;
  --type-body-weight: 450;
  --type-body-family: var(--font-body);
  --type-body-sm-size: 0.875rem;
  --type-body-sm-leading: 1.6;
  --type-body-sm-tracking: -0.005em;
  --type-body-sm-weight: 450;
  --type-body-sm-family: var(--font-body);
  --type-label-size: 1rem;
  --type-label-leading: 1.25;
  --type-label-tracking: -0.01em;
  --type-label-weight: 600;
  --type-label-family: var(--font-body);
  --type-label-sm-size: 0.875rem;
  --type-label-sm-leading: 1.25;
  --type-label-sm-tracking: 0;
  --type-label-sm-weight: 600;
  --type-label-sm-family: var(--font-body);
  --type-caption-size: 0.8125rem;
  --type-caption-leading: 1.5;
  --type-caption-tracking: 0;
  --type-caption-weight: 450;
  --type-caption-family: var(--font-body);
  --type-price-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --type-price-leading: 1.1;
  --type-price-tracking: -0.02em;
  --type-price-weight: 700;
  --type-price-family: var(--font-numeric);
  --measure: 32em;
  --container: 1120px;
  --column: 600px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-tight: clamp(40px, 6vw, 64px);
  --section: clamp(64px, 9vw, 112px);
  --section-loose: clamp(96px, 13vw, 160px);
  --control-sm: 40px;
  --control: 48px;
  --control-lg: 56px;
  --cta-bar: 52px;
  --radius-control: 12px;
  --radius-surface: 16px;
  --radius-media: 16px;
  --shadow-1: 0 1px 2px rgba(33, 29, 29, 0.06);
  --shadow-2: 0 4px 12px rgba(33, 29, 29, 0.08);
  --shadow-3: 0 12px 32px rgba(33, 29, 29, 0.14);
  --motion-fast: 120ms;
  --motion-base: 160ms;
  --motion-slow: 240ms;
  --motion-enter: 420ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --z-header: 10;
  --z-cta-bar: 20;
  --z-sheet: 30;
  --z-toast: 40;

  /* 의미 색 — 라이트 */
  --bg-canvas: #faf9f9;
  --bg-surface: #fefefe;
  --bg-sunken: #f5f3f2;
  --bg-inverse: #211d1d;
  --text-primary: #211d1d;
  --text-secondary: #6b6361;
  --text-tertiary: #958d8b;
  --text-inverse: #fefefe;
  --text-accent: #b85309;
  --line-subtle: #ece9e8;
  --line-default: #dfdbda;
  --line-strong: #211d1d;
  --accent: #f47b1a;
  --accent-hover: #f7913f;
  --accent-on: #211d1d;
  --accent-soft: #fff4eb;
  --action: #211d1d;
  --action-hover: #534c4b;
  --action-on: #fefefe;
  --focus: #211d1d;
  --positive: #338807;
  --positive-soft: #f0f9eb;
  --negative: #cb3c18;
  --negative-soft: #fdf0ec;
  --scrim: rgba(22, 19, 19, 0.48);
  color-scheme: light;
}

/* 구간 단위 다크. 페이지 전체가 아니라 섹션에 data-tone="dark" 를 붙여 명암을 끊는다. */
[data-tone="dark"] {
  --bg-canvas: #161313;
  --bg-surface: #2a2525;
  --bg-sunken: #211d1d;
  --bg-inverse: #faf9f9;
  --text-primary: #f5f3f2;
  --text-secondary: #cbc5c4;
  --text-tertiary: #b3acaa;
  --text-inverse: #211d1d;
  --text-accent: #f7913f;
  --line-subtle: #3a3433;
  --line-default: #534c4b;
  --line-strong: #f5f3f2;
  --accent: #f47b1a;
  --accent-hover: #f7913f;
  --accent-on: #211d1d;
  --accent-soft: rgba(244, 123, 26, 0.14);
  --action: #faf9f9;
  --action-hover: #ece9e8;
  --action-on: #211d1d;
  --focus: #faf9f9;
  --positive: #b6e09a;
  --positive-soft: rgba(182, 224, 154, 0.12);
  --negative: #f0b8a6;
  --negative-soft: rgba(240, 184, 166, 0.12);
  --scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
[data-tone="light"] {
  --bg-canvas: #faf9f9;
  --bg-surface: #fefefe;
  --bg-sunken: #f5f3f2;
  --bg-inverse: #211d1d;
  --text-primary: #211d1d;
  --text-secondary: #6b6361;
  --text-tertiary: #958d8b;
  --text-inverse: #fefefe;
  --text-accent: #b85309;
  --line-subtle: #ece9e8;
  --line-default: #dfdbda;
  --line-strong: #211d1d;
  --accent: #f47b1a;
  --accent-hover: #f7913f;
  --accent-on: #211d1d;
  --accent-soft: #fff4eb;
  --action: #211d1d;
  --action-hover: #534c4b;
  --action-on: #fefefe;
  --focus: #211d1d;
  --positive: #338807;
  --positive-soft: #f0f9eb;
  --negative: #cb3c18;
  --negative-soft: #fdf0ec;
  --scrim: rgba(22, 19, 19, 0.48);
  color-scheme: light;
}

/* 테마: neutral */
[data-theme="neutral"], [data-theme="neutral"] [data-tone="light"] {
  --accent: #211d1d;
  --accent-hover: #534c4b;
  --accent-on: #fefefe;
  --accent-soft: #f5f3f2;
  --text-accent: #211d1d;
}
[data-theme="neutral"] [data-tone="dark"], [data-theme="neutral"][data-tone="dark"] {
  --accent: #faf9f9;
  --accent-hover: #ece9e8;
  --accent-on: #211d1d;
  --accent-soft: rgba(250, 249, 249, 0.08);
  --text-accent: #faf9f9;
}