/* onionskin — 디자인 시스템 정본 (3단계, designer).
 * 이름은 Tailwind 4 @theme 이름공간을 따르되 선언은 :root 에 둔다 — 브라우저는 @theme 블록을 읽지 않는다(lessons #73).
 * 캐릭터 리그·노출표 띠의 SVG 색도 getComputedStyle 로 여기서 읽는다(색의 출처는 하나).
 */
:root {
  /* 색 — 라이트박스(light) 위 동화지 + 흑연 글자 + 빨강 색연필 신호 + 파랑 색연필(그림 재료) */
  --color-table: #dde6f2;        /* 바탕 — 라이트박스 회청 · 머리 바탕(늘 불투명) */
  --color-paper: #fbf9f4;        /* 동화지 시트 · 원화 6장 · 단추 글자 · 덮개 위 글자 */
  --color-paper-back: #efece4;   /* 넘김 접힘의 뒷면 · 자리표시자 바탕 */
  --color-ink: #25262a;          /* 흑연 — 모든 본문 글자 · 클린 선 · 1px 칸막이 · 주 단추 바탕 · 덮개 판 */
  --color-pencil: #595c64;       /* 보조 글자(메타·캡션·노출표 번호) — 시트·바탕·뒷면 위 모두 4.5 넘음 */
  --color-edge: #9097a2;         /* 시트 테두리 · 등록 십자 · 필드 가이드 번호 밑선 — 장식, 글자 금지(누름 칸 테두리는 --color-pencil) */
  --color-faint: #b6bcc5;        /* 아주 옅은 선(바닥선 아래 연필 흔적) — 장식, 글자 금지 */
  --color-blue: #3a6bd4;         /* 파랑 색연필 — 어니언 스킨 · 러프 · 스페이싱 눈금 · 필드 가이드. 글자·단추·면 금지 */
  --color-accent: #cc1f80;       /* 빨강 색연필(OKLCH h 353) — 키 프레임 동그라미 · 재생 헤드 · 포커스 고리. 면·글자 금지 */
  --color-on-ink-soft: #b9bcc4;  /* 덮개(흑연 판) 위 보조 글자 */

  /* 서체 — 서가 가족만 */
  --font-display: "Anybody", "Space Grotesk", system-ui, sans-serif;  /* G1 지시로 Unbounded → Anybody(폭 축 50–150) */
  --stretch-display: 125%;      /* 쉬는 폭 — 넓은 고무도장. 폭 표(wireframe 3절)는 이 값으로 잰다 */
  --stretch-warp: 150%;         /* velocity-warp 상한 — 릴 도장만 스크롤 속도로 이 폭까지 늘어난다 */
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* 글자 크기 — display 는 폭 표(wireframe 3절)로 잰 값. 숫자를 바꾸면 폭 표를 다시 잰다 */
  --text-title: clamp(3.5rem, 10vw, 9.5rem);     /* 장면 1 제목(≥1024) — THE / LONG / HOP 세 줄, 왼쪽 5칸 */
  --text-title-m: clamp(2.5rem, 8.4vw, 5.5rem);  /* 장면 1 제목(720–1023) — 한 줄 */
  --text-title-s: clamp(2.25rem, 13.5vw, 3.5rem);/* 장면 1 제목(<720) — THE LONG / HOP 두 줄 */
  --text-reel: clamp(1.5rem, 3.2vw, 3rem);       /* 릴 도장 IN-BETWEENS 등 */
  --text-hold: clamp(2rem, 5vw, 5rem);           /* 장면 4 HOLD ×12 */
  --text-date: clamp(2.25rem, 5.6vw, 6rem);      /* 장면 5 날짜(≥720) — 시트 B 안 */
  --text-date-m: clamp(1.75rem, 8.4vw, 3rem);    /* 장면 5 날짜(<720) */
  --text-h2: clamp(2rem, 5.2vw, 5rem);           /* DRAWINGS · CREDITS · SCREENINGS */
  --text-frame: 1.25rem;                          /* 시트 귀퉁이 프레임 번호(Anybody 800) — 390 은 1rem */
  --text-lead: clamp(1.0625rem, 1.25vw, 1.25rem);/* 한 줄 소개 · 로그라인 */
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.6875rem;                        /* mono 대문자 판독값 11px — 글자 사이 0.08em */
  --text-cell: 0.625rem;                          /* 노출표 칸 번호 10px(장식 보조 — 같은 정보가 머리 판독값에 있다) */

  --leading-title: 0.88;
  --leading-tight: 1.15;
  --leading-body: 1.55;
  --tracking-title: -0.02em;
  --tracking-display: -0.01em;
  --tracking-micro: 0.08em;

  /* 간격 — 4px 바탕 척도 + 12칸 격자 */
  --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-gutter: clamp(1.25rem, 3vw, 3rem);
  --spacing-col-gap: 1.5rem;
  --spacing-header: 3.5rem;       /* 56px · 390 은 --spacing-header-m */
  --spacing-header-m: 3.25rem;    /* 52px */
  --spacing-ruler: 1.25rem;       /* 머리 눈금 자의 눈금 줄 높이 20px — 노출표 띠는 머리로 합쳤다(G1 ruler, headers.md 함정) */
  --spacing-sheet-pad: 2rem;      /* 시트 안쪽 여백 · <720 은 1rem */
  --spacing-peg: 0.5rem;          /* 머리 페그가 아래로 튀어나오는 길이 */
  --spacing-tab: 2rem;            /* 릴 구간 이름 줄 + 눈금 줄 합(머리 안) */
  --spacing-touch: 2.75rem;       /* 누름 칸 최소 44px */

  /* 모서리 — 전부 직각(렌즈). 동그라미·페그 원은 SVG 도형이지 radius 가 아니다 */
  --radius-none: 0;

  /* 그림자 — 없음. 포커스 고리만 */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--color-table), 0 0 0 4px var(--color-accent);
  --shadow-focus-paper: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-accent);
  --shadow-focus-ink: 0 0 0 2px var(--color-ink), 0 0 0 4px var(--color-paper);

  /* 선 굵기 */
  --stroke-clean: 2px;            /* 클린 흑연 선(캐릭터) */
  --stroke-rough: 1.5px;          /* 러프 파랑 · 어니언 스킨 · 바닥선 */
  --stroke-rule: 1px;             /* 칸막이 · 시트 테두리 · 필드 가이드 */

  /* 어니언 스킨 투명도 — 이전 그림 1·2·3 */
  --skin-1: 0.45;
  --skin-2: 0.28;
  --skin-3: 0.14;
  --skin-under: 0.22;             /* 밑장 비침(동화지 반투명) */

  /* 이징 — 이름은 animation-vocabulary 어휘 */
  --ease-linear: linear;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);   /* 이륙 스페이싱(x) */
  --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);    /* 하강 스페이싱(x) — 위치 보간에만, UI 에 쓰지 않는다 */

  /* 시간 */
  --duration-press: 120ms;
  --duration-fade: 180ms;
  --duration-reveal: 420ms;
  --duration-overlay: 320ms;
  --boil-fps: 8;                  /* 연필 선 떨림 — 상시 루프 하나 */
}