/*
 * farline — 디자인 시스템 정본 (3단계, 2026-10-09)
 * 이름은 Tailwind 4 @theme 이름공간을 따르지만 선언은 :root 에 둔다 — 브라우저는 @theme 블록을 읽지 않는다(lessons #73).
 * 렌즈 minimalist-ui 를 어두운 바탕으로 뒤집었다: 따뜻한 무채 + 강조 한 색, 그라데이션·네온·유리·큰 그림자 0.
 */
:root {
  /* 색 — 바탕은 따뜻한 아스팔트 흑, 강조는 얼음색 한 색(OKLCH H220 C0.076). 강조는 선·속도 숫자에만, 큰 면 금지. */
  --color-bg: #121110;
  --color-surface: #1c1a18;
  --color-line: #34312d;
  --color-ink: #ece8e0;
  --color-muted: #a29c92;
  --color-faint: #77726a; /* 3.95:1 — 글자에는 24px 이상만, 눈금·비활성 선용 */
  --color-accent: #8fd4ea;
  --color-on-accent: #121110;
  --color-on-ink: #121110; /* 뼈색 채움 단추 위 글자 */
  --color-scrim: rgb(18 17 16 / 0.72); /* 예약 시트 뒤 덮개 */

  /* 가상 제품 색 3 — 장면 5 색 고르기(칩·프레임 선 그림에서만) */
  --color-frame-graphite: #6b6964; /* 3.44:1 bg · 3.16:1 surface — 그래픽 3:1 */
  --color-frame-bone: #e6e1d6;
  --color-frame-ice: #8fd4ea;

  /* 서체 — display 는 폭 축(wdth 62~125)이 있는 Archivo, 본문은 Schibsted Grotesk */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* 글자 크기 — 폭 표(wireframe §4)로 실측한 값. 바꾸면 폭 표도 다시 잰다. */
  --text-wordmark: min(calc((100vw - 2 * var(--spacing-gutter)) / 4.48), 34svh); /* FARLINE wdth100 4.380em — 글자를 쪼개면(inline-block) 커닝이 풀려 1.5% 넓어진다(4단계 실측 4.45em) */
  --text-readout: clamp(6rem, 18vw, 16rem); /* 속도계 두 자리 */
  --text-display: clamp(2.75rem, 6.4vw, 7rem); /* 장면 제목 */
  --text-stat: clamp(3rem, 8.5vw, 8rem); /* 거리·무게·가격 숫자 */
  --text-h3: 1.5rem;
  --text-lead: 1.25rem;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem; /* 대문자 라벨, 자간 0.08em */

  --text-wordmark--line-height: 0.82;
  --text-display--line-height: 0.98;
  --text-stat--line-height: 0.9;
  --text-body--line-height: 1.6;

  /* 폭 축 — 쓰는 값만 */
  --font-stretch-rest: 100%;
  --font-stretch-max: 125%;
  --font-stretch-max-mobile: 112%;
  --font-stretch-numeral: 75%;

  /* 간격 — 4 의 배수 척도. fluid 는 gutter 하나(margin·gap 에만, 테두리 상자 padding 은 리터럴 단계 — #50) */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-48: 12rem;
  --spacing-gutter: clamp(1.25rem, 2.2vw, 2rem);
  --spacing-header: 2.75rem; /* 44px, 모바일은 3rem */
  --spacing-header-mobile: 3rem;
  --spacing-tap: 2.75rem; /* 최소 터치 44px */

  /* 모서리 — 렌즈: 8px 이하, 큰 상자 알약 금지 */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* 그림자 — 사실상 없음. 포커스 링만 */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* 이징 — animation-vocabulary: Ease-out(등장·응답) · Ease-in-out(화면 안 이동) · Linear(marquee 만) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;

  /* 길이 — 등장은 600ms 이하 한 번 */
  --animate-press: 120ms;
  --animate-enter: 480ms;
  --animate-reveal: 520ms;
  --animate-stagger: 40ms;
}

@media (max-width: 719px) {
  :root {
    --spacing-header: var(--spacing-header-mobile);
  }
}