/**
 * Paradies Design System Tokens — clarksimpson
 *
 * 출처: z_info/clarksimpson_obsidian/02-ARCHITECTURE/frontend/design.md (v0.2 LOCKED)
 * 강제 룰: .claude/rules/design-system.md
 *
 * 모든 신규 UI 코드는 본 파일의 토큰만 사용. 컬러/사이즈/간격 하드코딩 금지.
 */

:root {
  /* === Color Palette (design.md §1) === */
  --color-brand: #978667;
  --color-brand-dark: #3C1E1E;
  --color-cta: #FEE500;
  --color-cta-hover: #FDD835;

  --color-text: #222;
  --color-text-muted: #666;
  --color-text-on-dark: #fff;

  --color-border: #ededed;
  --color-border-strong: #24262d;
  --color-border-soft-on-dark: rgba(255, 255, 255, 0.1);

  --color-bg: #fff;
  --color-bg-soft: #faf8f5;
  --color-bg-tinted: rgba(151, 134, 103, 0.05);

  --color-overlay-dark: rgba(0, 0, 0, 0.5);
  --color-overlay-darker: rgba(0, 0, 0, 0.7);

  --color-danger: #bb0000;
  --color-success: #2e7d32;

  /* === Typography (design.md §2) === */
  --font-body: 'Noto Sans KR', 'Montserrat', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Noto Sans KR', 'Montserrat', sans-serif;
  --font-numeric: 'Montserrat', sans-serif;
  --font-script: 'Caveat', cursive;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.25rem;     /* 20 */
  --text-xl: 1.5rem;      /* 24 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2rem;       /* 32 */
  --text-4xl: 2.5rem;     /* 40 */
  --text-display: 3.5rem; /* 56 */

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* === Spacing (design.md §3) — 4px 그리드 === */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* === Border Radius (design.md §4) === */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* === Shadow / Elevation (design.md §5) === */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 16px rgba(0, 0, 0, 0.10);
  --shadow-4: 0 12px 24px rgba(0, 0, 0, 0.14);
  --shadow-5: 0 20px 40px rgba(0, 0, 0, 0.20);
  --shadow-inset-focus: inset 0 0 0 2px rgba(0, 0, 0, 0.2);

  /* === Border (design.md §6) === */
  --border-width-1: 1px;
  --border-width-2: 2px;

  /* === Motion (design.md §7) === */
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;

  --ease-out: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  /* === Breakpoints (design.md §8) — JS에서 참조 가능 === */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-2xl: 1400px;

  /* === Container Widths (멱등성 보강 2026-05-03) === */
  --container-narrow: 880px;   /* 사용자 흐름(예약/결제/마이페이지) */
  --container-base: 1140px;    /* 일반 페이지 */
  --container-wide: 1400px;    /* 와이드 콘텐츠 */
}

/* === 기본 타이포 적용 === */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

/* === 컴포넌트 베이스 (design.md §9) === */

/* Buttons */
.btn-cta {
  background: var(--color-cta);
  color: var(--color-brand-dark);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  border: 0;
  box-shadow: var(--shadow-3);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.btn-cta:hover {
  background: var(--color-cta-hover);
  box-shadow: var(--shadow-4);
}

.btn-brand {
  background: var(--color-brand);
  color: var(--color-text-on-dark);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  border: 0;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.btn-brand:hover {
  background: var(--color-cta-hover);
}

.btn-outline {
  background: transparent;
  color: var(--color-brand-dark);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width-2) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn-outline:hover {
  background: #4b514d;
  color: var(--color-text-on-dark);
  border-color: transparent;
}

/* Form */
.form-control {
  border: var(--border-width-1) solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.form-control:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-inset-focus);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.form-help {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.form-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-danger);
}

/* Card */
.card {
  background: var(--color-bg);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--space-5);
}

.card-soft {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* Section */
.section {
  padding: var(--space-16) 0;
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.section-subtitle {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

/* Steps (예약 흐름 표시기) */
.booking-steps {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  list-style: none;
  padding: 0;
}
.booking-steps li {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: center;
}
.booking-steps li.is-active {
  background: var(--color-brand);
  color: var(--color-text-on-dark);
}
.booking-steps li.is-done {
  background: var(--color-bg-tinted);
  color: var(--color-brand);
  border: var(--border-width-1) solid var(--color-brand);
}

/* Alert */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.alert-danger {
  background: rgba(187, 0, 0, 0.05);
  color: var(--color-danger);
  border: var(--border-width-1) solid rgba(187, 0, 0, 0.2);
}
.alert-info {
  background: var(--color-bg-tinted);
  color: var(--color-brand-dark);
  border: var(--border-width-1) solid var(--color-brand);
}