/*
 * ember-table — 디자인 시스템 정본 (2회차 방향 D · Ember | Table · lens: minimalist-ui)
 *
 * 이름은 Tailwind 4 @theme 이름공간이다. 정적 페이지에서는 :root 로 싣고, 승급 때 이 블록을 그대로 @theme { } 로 옮긴다.
 * style.css 는 여기의 var() 만 쓴다(raw 색 금지). 대비 실측·쓰임은 _design/DESIGN.md.
 * 서체 파일은 페이지가 링크한다: /_shared/fonts/syne/font.css · /_shared/pretendard.css
 */
:root {
  /* ── 색 · 바탕 ─────────────────────────────────────────────── */
  --color-bg: #d6bc96; /* 크라프트 — 페이지 바탕(갈색 종이). Ember 칸도 같은 바탕, 오른쪽 1px rule 로만 가른다 */
  --color-surface: #e2cfb0; /* 신문지 — 띠(계절·예약 맛보기) · 예약 패널 · 고지 상자 · 꼬리 · CSS 지도 */

  /* ── 색 · 글자 (두 가지 잉크 + 탄) ─────────────────────────── */
  --color-ink: #1d1712; /* 그을음 — 본문 · 제목 · 가격 · 요리 이름 · 포커스 링 */
  --color-char: #4d3b2b; /* 탄 — 설명 · 라벨 · 메타 · `$` · 고지 줄 · 필터에 안 맞는 행 */
  --color-ember: #8c2410; /* 잉걸불 — 강조 한 색(두 번째 잉크). 버튼 · `fire.` · `&` · 현재 표시 · 켜진 글리프 · 호버 괘선 */
  --color-on-ember: #f6ead6; /* 잉걸불 바탕 위 글자 */

  /* ── 색 · 선 ───────────────────────────────────────────────── */
  --color-line: #6b5540; /* 조작 요소 테두리 · 화덕 괘선 — 비텍스트 3:1 을 넘는다 */
  --color-rule: #a88d68; /* 괘선 · 꺼진 글리프 막대 · 지도 빗금 — 장식 전용, 글자에 쓰지 않는다 */

  /* ── 색 · 불꽃 일러스트 전용 (글자·UI 에 쓰지 않는다) ─────────── */
  --color-flame: #e0552a; /* 불꽃 — 불꽃 끝·몸통 줄 · 호버 때 켜진 글리프 막대 */

  /* ── 서체 ──────────────────────────────────────────────────── */
  --font-display: "Syne", "Pretendard Variable", ui-sans-serif, system-ui, sans-serif; /* 히어로 · 페이지 제목 · 워드마크 · 구획 제목 · 숫자 */
  --font-sans: "Pretendard Variable", Pretendard, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* 본문 · 요리 이름 · 가격 · UI */

  --font-weight-body: 400;
  --font-weight-medium: 500; /* 링크 · 버튼 · 라벨 · 구획 제목(Syne) */
  --font-weight-strong: 600; /* 요리 이름 · 오늘 줄 */
  --font-weight-display: 600; /* 히어로 · 페이지 제목 · 워드마크. Syne 은 굵어질수록 넓어진다 — 700 이상 금지 */

  /* ── 글자 크기 (Tailwind 4: --text-* + --line-height · --letter-spacing) ── */
  --text-hero: clamp(3rem, 1.4rem + 6.2vw, 6.75rem); /* 홈 h1 — 390 → 48px · 1440 → 108px */
  --text-hero--line-height: 0.98;
  --text-hero--letter-spacing: -0.025em;
  --text-display: clamp(2.5rem, 1.4rem + 3.2vw, 4.25rem); /* 페이지 h1 — 40 → 68px */
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.02em;
  --text-title: clamp(1.625rem, 1.15rem + 1.6vw, 2.5rem); /* 인용 · 이야기 문장 · 블록 제목 — 26 → 40px */
  --text-title--line-height: 1.12;
  --text-title--letter-spacing: -0.01em;
  --text-numeral: clamp(2.25rem, 1.7rem + 2vw, 3.5rem); /* 숫자 장부 — 36 → 56px */
  --text-numeral--line-height: 1;
  --text-wordmark: 1.875rem; /* 워드마크 — 30px (lg 미만 1.375rem 로 줄인다) */
  --text-wordmark--line-height: 1;
  --text-heading: 1.25rem; /* 메뉴 구획 제목(Snacks …) · 로마 숫자 — 20px, Syne 500 */
  --text-heading--line-height: 1.2;
  --text-lede: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); /* 리드 — 18 → 21px */
  --text-lede--line-height: 1.5;
  --text-dish: 1.0625rem; /* 요리 이름 — 17px, Pretendard 600 */
  --text-dish--line-height: 1.3;
  --text-body: 1.0625rem; /* 본문 — 17px */
  --text-body--line-height: 1.6;
  --text-price: 1.0625rem; /* 가격 — tabular-nums, 오른쪽 정렬 */
  --text-price--line-height: 1.3;
  --text-small: 0.875rem; /* 요리 설명 · 메타 · 고지 — 14px */
  --text-small--line-height: 1.5;
  --text-label: 0.75rem; /* 대문자 라벨 — 12px */
  --text-label--line-height: 1.3;
  --text-label--letter-spacing: 0.14em;

  /* ── 간격 (Tailwind 4: --spacing 기본 단위 + 이름 붙은 --spacing-*) ── */
  --spacing: 0.25rem; /* 4px 척도 — 나머지는 이것의 배수 */
  --spacing-sidebar: clamp(20rem, 30vw, 27rem); /* Ember 칸 폭 — 1440 → 432px (lg 이상에서만) */
  --spacing-sidebar-pad: 2rem; /* Ember 칸 안쪽 여백 32px */
  --spacing-page: clamp(1.25rem, 0.5rem + 3vw, 3.5rem); /* Table 칸·1열 좌우 여백 20 → 56px */
  --spacing-gutter: clamp(1rem, 0.6rem + 1.2vw, 1.5rem); /* 8칸 격자 거터 16 → 24px */
  --spacing-row: 0.875rem; /* 메뉴·시간표 행의 위아래 — 행 높이 ≈ 52px */
  --spacing-stack: 1.5rem; /* 블록 안 요소 사이 */
  --spacing-block: clamp(4rem, 2.5rem + 5vw, 7.5rem); /* 블록 사이 — 64 → 120px. 메뉴 구획 사이는 절반 */
  --spacing-nav-sm: 3.5rem; /* lg 미만 머리 높이 56px */
  --spacing-touch: 2.75rem; /* 터치 타깃 최소 44px */

  /* ── 폭 ─────────────────────────────────────────────────────── */
  --container-table: 60rem; /* Table 칸 본문 최대 폭 960px */
  --container-prose: 40rem; /* 이야기 본문 ≈ 62ch */
  --container-lede: 34rem; /* 히어로 리드 */
  --breakpoint-md: 48rem; /* 1열 → 8칸 */
  --breakpoint-lg: 64rem; /* 여기서 Ember 칸이 왼쪽에 고정된다 */

  /* ── 모서리 ─────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs: 2px; /* 불꽃 줄 · 글리프 막대 끝 */
  --radius-sm: 4px; /* 버튼 · 날짜 · 시각 칩 · 스테퍼 */
  --radius-md: 6px; /* 예약 패널 · 고지 상자 */
  --radius-full: 9999px; /* 영업 상태 점만 — 큰 요소에 쓰지 않는다 */

  /* ── 그림자 — 없다 (minimalist-ui · 종이에는 그림자가 없다) ──── */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ink); /* 포커스 링 — 잉걸불 버튼 위에서도 틈으로 갈라져 보인다 */

  /* ── 이징 · 기본 전환 ───────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 들어오기(Scroll reveal · Reveal) */
  --ease-snap: cubic-bezier(0.25, 1, 0.5, 1); /* 상태 바뀜(호버 괘선 · 선택 · 스테퍼) */
  --ease-breathe: cubic-bezier(0.45, 0, 0.55, 1); /* 불꽃 숨 — Alternate 루프 */
  --default-transition-duration: 180ms;
  --default-transition-timing-function: var(--ease-snap);

  /* ── 애니메이션 (키프레임은 아래) ───────────────────────────── */
  --animate-breathe: breathe 3.6s var(--ease-breathe) infinite alternate; /* 불꽃 줄 — 줄마다 delay·길이를 달리 */
  --animate-kindle: kindle 700ms var(--ease-out) both; /* 첫 로드 때 괘선이 그어진다 — 한 번 */
  --animate-rise: rise 600ms var(--ease-out) both; /* Scroll reveal — 한 번 */
}

@keyframes breathe {
  from { transform: scaleX(var(--breathe-from, 0.92)); }
  to { transform: scaleX(var(--breathe-to, 1.04)); }
}

@keyframes kindle {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes rise {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* reduced-motion — 도는 것 0. 불꽃은 멈춘 채 그려져 있다 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animate-breathe: none;
    --animate-kindle: none;
    --animate-rise: none;
    --default-transition-duration: 0ms;
  }
}