/* dayline — 디자인 시스템 정본 (3단계). 이름은 Tailwind 4 @theme 이름공간, 선언은 :root(브라우저는 @theme 를 읽지 않는다, #73).
 * 하루 데이터 표(시각별 하늘 3점·해 고도·색온도·밝기·조도)는 wireframe 1절이 정본 — 구현이 main.js 상수로 옮긴다.
 * 여기에는 정적 팔레트 + 정지 컷 4장의 하늘 + 색온도 빛 색 7점만 둔다. */
:root {
  /* ── 정적 팔레트 ─────────────────────────────────────────── */
  --color-bg: #0b1424;            /* 밤 남색 — 자정 천정 · 정적 블록 바탕 · 기록 tone dark */
  --color-surface: #13203a;       /* 구매 띠 바탕 */
  --color-bg-noon: #e9eff1;       /* 정오 천정 — 무대가 가장 밝을 때 */
  --color-ink: #f4efe6;           /* 종이 — 어두운 바탕 위 글자 · 무대 글자색(밤 쪽) */
  --color-ink-dark: #12151c;      /* 먹 — 밝은 바탕 위 글자 · 무대 글자색(낮 쪽) · 종이 단추 글자 */
  --color-plate-paper: #f4efe6;   /* 종이 단추·칩 바탕(= ink 와 같은 값, 역할이 다르다) */
  --color-soft: #9aa3b5;          /* 밤 바탕 위 보조 글자(작은 글자 가능) */
  --color-line: #2a3a5a;          /* 1px 칸막이 · 빈 하루 띠 칸 — 장식, 글자 금지 */
  --color-accent: #e03e52;        /* 등불 빨강 OKLCH(0.608 0.197 18.7) — "지금" 표시에만 */
  --color-plate-ph: #c9ccd1;      /* 자리표시자 바탕 */
  --color-ph-ink: #4a505c;        /* 자리표시자 보조 글자 */
  --color-sunset: #e0683a;        /* 18:00 지평 — 하늘 데이터의 대표색(팔레트 칩용, UI 에 쓰지 않는다) */

  /* ── 정지 컷 하늘(천정 top · 안개 띠 haze · 지평 low) — reduced-motion·폴백의 CSS 3점 그라데이션 ── */
  --color-ground-midnight-top: #0b1424;
  --color-ground-midnight-haze: #0f192c;
  --color-ground-midnight-low: #141f35;
  --color-ground-dawn-top: #8aa9c7;       /* 07:30 */
  --color-ground-dawn-haze: #b9bcbe;
  --color-ground-dawn-low: #f0d2af;
  --color-ground-noon-top: #e9eff1;       /* 12:00 */
  --color-ground-noon-haze: #eff2f0;
  --color-ground-noon-low: #f6f5ee;
  --color-ground-dusk-top: #3a5378;       /* 18:10 */
  --color-ground-dusk-haze: #865e52;
  --color-ground-dusk-low: #d35d35;
  /* 장면 5(밤 착지) 정지 컷은 midnight 세 색을 쓴다 */

  /* ── 색온도 → 빛 색 (빛으로만 — 글자·단추 바탕 금지) ── */
  --color-light-1800: #ff7e00;
  --color-light-2200: #ff9227;
  --color-light-2700: #ffa757;
  --color-light-3500: #ffc18d;
  --color-light-4500: #ffdabb;
  --color-light-5600: #ffefe1;
  --color-light-6500: #fffefa;

  /* ── 서체 ── */
  --font-display: "Instrument Serif", "Times New Roman", serif;   /* 시계·판독 숫자·워드마크·제품 이름(기울임)·가격 — 라틴·숫자 전용 */
  --font-body: "Pretendard Variable", "Pretendard", system-ui, sans-serif;  /* 한글 전부 — 제목은 300, 본문 400 */

  /* ── 글자 크기 ── */
  --text-clock: clamp(6rem, 20vw, 18rem);        /* ≥1024 시계(오른쪽 6칸) */
  --text-clock-m: clamp(5.5rem, 34vw, 15rem);    /* <1024 시계 */
  --text-readout: clamp(1.75rem, 2.6vw, 2.5rem); /* 판독 줄 */
  --text-lede: clamp(1.5rem, 2.2vw, 2.25rem);    /* 태그라인 · 캡션 · 제품 소개(무대 글자는 24px 이상) */
  --text-corner: 1.5rem;                          /* 귀퉁이 링크 · 정지 · 구매 칩 · 착지 가격 */
  --text-corner-sm: 1.375rem;                     /* 390 미만 착지 가격 */
  --text-wordmark: 1.75rem;
  --text-wordmark-tail: 4rem;
  --text-name: clamp(2.5rem, 4.4vw, 4rem);        /* 제품 이름(Instrument Serif 기울임) */
  --text-price: clamp(1.75rem, 2.4vw, 2.25rem);
  --text-h2: clamp(2rem, 4vw, 3.5rem);            /* Pretendard 300 */
  --text-body: 1rem;
  --text-small: 0.875rem;                         /* 정적 블록 · 스크롤 안내(밤 위)만 */

  /* ── 간격 (0.25rem 척도 + 격자) ── */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-40: 10rem;
  --spacing-gutter: clamp(1.25rem, 3.2vw, 3rem);
  --spacing-col-gap: 1.5rem;
  --spacing-corner: 3.5rem;                        /* 위 귀퉁이 높이 */
  --spacing-band: 4rem;                            /* 390 아래 띠 높이(+ safe-area) */
  --spacing-section: clamp(6rem, 12vw, 10rem);     /* 정적 블록 위아래 — 렌즈의 큰 여백 */

  /* ── 모서리 ── */
  --radius-none: 0;
  --radius-frame: 1.25rem;                         /* 제품 사진 바깥 껍질 */
  --radius-frame-inner: calc(1.25rem - 0.375rem);  /* 안쪽 사진(동심원) */
  --radius-pill: 999px;                            /* 구매 칩 · 장바구니 단추 · 시각 칩 */

  /* ── 그림자 ── */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
  --shadow-focus-light: 0 0 0 2px var(--color-ink), 0 0 0 4px var(--color-ink-dark);
  --shadow-frame: inset 0 1px 0 rgba(244, 239, 230, 0.08);  /* 이중 테두리 안쪽 윗선 — 진한 그림자 없음 */

  /* ── 이징 (기본 linear·ease-in-out 금지 — 렌즈) ── */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
}