/* inbetween — 디자인 시스템 정본 (3단계, designer).
 * 이름은 Tailwind 4 @theme 이름공간을 따르되 선언은 :root 에 둔다 — 브라우저는 @theme 블록을 읽지 않는다(lessons #73).
 * 색의 출처는 여기 하나다: 셰이더 유니폼도 getComputedStyle 로 이 값을 읽는다.
 */
:root {
  /* 색 — 군청 색면(mid) + 종이 글자 + 산성 라임 신호 */
  --color-field: #2b3fd8;        /* 바탕 색면 · 셰이더 uField */
  --color-field-lo: #2233bf;     /* 셰이더가 내려가는 가장 어두운 끝(색면을 어둡게만 흔든다) · uFieldLo */
  --color-field-hi: #4659ee;     /* 장면 2 재생 점 둘레 빛의 가장 밝은 끝 — 이 위에는 큰 글자만 · uFieldHi */
  --color-deep: #16217a;         /* 메뉴 판 · 꼬리 띠 · 읽기 칸(타임라인 판독 상자) 바탕 */
  --color-paper: #f3f2ea;        /* 색면 위 모든 글자 · 티켓·장소 판 바탕 · 셰이더 uPaper */
  --color-soft: #c9d0fa;         /* 색면 위 보조 글자(작은 글자) — 색면·field-lo·deep 위에서만 */
  --color-line: #7d8cf0;         /* 색면 위 1px 칸막이·눈금·곡선 그래프 격자 — 장식, 글자 금지 */
  --color-ghost: #8796f2;        /* 어니언 스킨 잔상 글자 — 장식(aria-hidden), 내용 글자 아님 */
  --color-ink: #0b0d14;          /* 종이 판·라임 위 글자 */
  --color-mute: #5a5e6b;         /* 종이 판 위 보조 글자 */
  --color-paper-dim: #e2e1d6;    /* 종이 판 줄무늬 · 자리표시자 바탕 */
  --color-accent: #d4f53c;       /* 산성 라임 — 키프레임 다이아몬드 · 재생 헤드 · 선택 표시 · 포커스 고리. 면 금지 */

  /* 서체 */
  --font-display: "Syne", "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* 글자 크기 — display 는 폭 표(wireframe 4절)로 잰 값. 숫자를 바꾸면 폭 표를 다시 잰다 */
  --text-pose-a: clamp(3rem, 7.2vw, 9rem);        /* 장면 1 자세 A(≥720) — 곡선 위 9자, 굵기 400 */
  --text-pose-a-m: clamp(2.25rem, 10vw, 3.5rem);  /* 장면 1 자세 A(<720) — 세로 계단 9줄 */
  --text-pose-b: clamp(2.5rem, 8.8vw, 11rem);     /* 장면 2 자세 B(≥720) — 한 줄, 굵기 800 */
  --text-pose-b-m: clamp(3rem, 21vw, 9.5rem);     /* 장면 2 자세 B(<720) — 3×3 줄 INB/ETW/EEN */
  --text-name: clamp(2rem, 5.6vw, 6.5rem);        /* 장면 3 출연자 이름(≥1024, 2칸) */
  --text-name-m: clamp(1.75rem, 8.2vw, 5.25rem);  /* 장면 3 출연자 이름(<1024, 1칸) */
  --text-date: clamp(1.375rem, 2.6vw, 2.5rem);    /* 장면 1 일시 한 줄 */
  --text-price: clamp(1.75rem, 2.8vw, 2.75rem);   /* 장면 5 패스 가격 */
  --text-h2: clamp(2rem, 4.4vw, 4.25rem);         /* 정적 블록 제목 */
  --text-lead: clamp(1.0625rem, 1.3vw, 1.3125rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;                            /* mono 대문자 — 판독값·이징 이름·좌표 */
  --text-micro--letter-spacing: 0.08em;

  /* 간격 — 4px 척도 */
  --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-gutter: clamp(1.25rem, 3.2vw, 3rem);
  --spacing-header: 3.25rem;                         /* 머리 높이 52px */
  --spacing-col-gap: 1.5rem;                         /* 12칸 격자 사이 */

  /* 모서리 — 전부 직각(렌즈) */
  --radius-none: 0;

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

  /* 이징 — 이름이 곧 장면 2 의 글자별 곡선 이름이다(그래프 칸에 같은 이름이 찍힌다) */
  --ease-linear: linear;
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
  --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-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* impeccable-disable bounce-easing: 등장 연출 기본값이 아니라 장면 2 글자 W 의 곡선 이름이다 — 그래프 칸이 이 넘침을 보여 주는 것이 주제(DESIGN 이 장만의 한 가지). 넘침은 y·회전에만 */
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
}