/* onset — 디자인 시스템 정본 (3단계, designer)
 * 이름은 Tailwind 4 @theme 이름공간을 따르지만 선언은 :root 에 둔다 — @theme 블록은 브라우저가 읽지 않는다(lessons #73).
 * 렌즈: industrial-brutalist-ui — 직각·1px 잉크 선·모노 수치·강조 1색. 모서리 둥글기·그림자·그라데이션 0.
 * 대비 실측은 _design/DESIGN.md 대비표.
 */
:root {
  /* ── 색 — 어두운 무대(다듬기 1, 사용자 선택 2026-10-14) ── */
  --color-bg: #010203;          /* 흑연 무대 — 거의 검정, 아주 약한 청 기운(L 0.082 · C 0.008 · h 241). #080b0d 와 ΔE 0.065 · #222222 와 0.170 */
  --color-ink: #e8ebe8;         /* 밝은 잉크 — 글자·선·도형(바탕 위 17.2:1) */
  --color-ink-2: #9aa2a5;       /* 보조 글자 — 설명·메타(바탕 위 7.96:1 · 판 위 6.89:1) */
  --color-accent: #4a86ff;      /* 코발트 신호, 한 단계 밝게 — 재생 헤드·공·칼선·누적 선·초점 링·재생 단추 채움. 바탕 위 6.05:1 이라 글자로도 AA. 큰 면 금지 */
  --color-plate: #13181b;       /* 판 — transport 띠·메뉴 판·펼친 사례 바탕(바탕보다 한 단 밝은 흑연) */
  --color-paper: #010203;       /* 밝은 면(강조·잉크) 위 글자 — 재생 단추 글자(강조 위 6.05:1) · hover 반전 글자 */
  --color-line: var(--color-ink);       /* 구획 선은 잉크 1px */
  --color-focus: var(--color-accent);

  /* ── 서체 ───────────────────────────────────────────── */
  --font-display: "Instrument Sans", "Pretendard Variable", system-ui, sans-serif; /* 라틴 display·워드마크·모프 단어·큰 숫자 */
  --font-body: "Pretendard Variable", Pretendard, system-ui, sans-serif;            /* 한국어 본문·약속 문장·제목 */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;                         /* 이징 이름·길이·타임코드·판독 */

  /* 가변 축 범위(Instrument Sans 서가 파일: wdth 75–100 · wght 400–700) */
  --font-display-wdth-min: 75%;
  --font-display-wdth-max: 100%;
  --font-display-wght-min: 400;
  --font-display-wght-max: 700;

  /* ── 글자 크기 ──────────────────────────────────────── */
  --text-reel: clamp(5.5rem, 26vw, 23rem);        /* 모프 단어·ONSET 착지 — 폭 표: 3.265em × 크기 ≤ 칸 */
  --text-figure: clamp(2.5rem, 6vw, 5.5rem);      /* 장 5 큰 숫자 384 · 900 · 15.00 */
  --text-email: clamp(1.75rem, 8vw, 7.5rem);      /* 연락 메일 주소 */
  --text-headline: clamp(1.75rem, 3.9vw, 3.5rem); /* 약속 문장(한국어, Pretendard 700) */
  --text-glyph: clamp(2rem, min(4vw, 6.2svh), 3.5rem); /* 장 1 레인의 A·B 글리프 */
  --text-title: clamp(1.5rem, 2.6vw, 2.5rem);     /* 정적 블록 제목 */
  --text-lead: 1.0625rem;   /* 장 자막 설명 · 사례 펼침 문장 */
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-mono: 0.75rem;     /* 12px — 레인 라벨·판독·마커 */
  --text-mono-lg: 0.8125rem;/* 13px — 타임코드 */
  --text-mono-sm: 0.6875rem;/* 11px — 모바일 레인 라벨 */

  --text-headline--line-height: 1.12;
  --text-reel--line-height: 0.86;
  --text-body--line-height: 1.6;
  --text-mono--line-height: 1.35;
  --text-reel--letter-spacing: -0.04em;
  --text-headline--letter-spacing: -0.03em;
  --text-mono--letter-spacing: 0.04em;

  /* ── 간격 (4px 척도) ────────────────────────────────── */
  --spacing-px: 1px;
  --spacing-1: 0.25rem;  /* 4 */
  --spacing-2: 0.5rem;   /* 8 — 장 4 칸 사이 */
  --spacing-3: 0.75rem;  /* 12 */
  --spacing-4: 1rem;     /* 16 — 모바일 거터 */
  --spacing-6: 1.5rem;   /* 24 — 720 거터 */
  --spacing-8: 2rem;     /* 32 */
  --spacing-10: 2.5rem;  /* 40 — 1024 이상 거터 */
  --spacing-12: 3rem;    /* 48 — 단추 높이 */
  --spacing-16: 4rem;    /* 64 — transport 띠 높이(데스크톱) */
  --spacing-24: 6rem;    /* 96 — 레인 높이(데스크톱) · 정적 블록 사이 */
  --spacing-32: 8rem;    /* 128 — 정적 블록 위아래 */
  --spacing-gutter: clamp(1rem, 2.8vw, 2.5rem);   /* margin·gap 에만(fluid 는 테두리 상자 padding 에 쓰지 않는다, #50) */
  --spacing-header: 3.5rem;      /* 56 */
  --spacing-header-sm: 3.25rem;  /* 52 */
  --spacing-label: 15rem;        /* 240 — 레인 라벨 칸 */
  --spacing-target: 2.75rem;     /* 44 — 최소 터치 타깃 */

  /* ── 모서리·그림자 — 브루탈리스트: 0 ───────────────── */
  --radius-none: 0;
  --radius-ball: 50%;    /* 공(장 2)과 곡선 위 점만 */
  --shadow-none: none;

  /* ── 이징 (UI 와 CSS 용 — 쇼릴 안은 같은 이름의 GSAP 함수) ── */
  --ease-linear: linear;                                   /* GSAP none — 재생 헤드·누적 선 */
  --ease-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);  /* GSAP power2.inOut */
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);       /* GSAP power3.in — 메뉴 닫기·모여들기 */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);          /* GSAP expo.out — 기본 '응답' 곡선 */
  --ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);      /* impeccable-disable bounce-easing: UI 기본값이 아니라 쇼릴이 비교해 보이는 곡선 이름(장 1 레인 ④·할 수 있는 일 "도형" 행 미리보기)이다 — 넘침을 보이는 것이 이 장의 주제 */
  --ease-elastic-out: linear(0, 0.361, 0.832, 1.2, 1.364, 1.336, 1.193, 1.029, 0.912, 0.868, 0.889, 0.944, 1, 1.036, 1.047, 1.036, 1.016, 0.997, 0.986, 0.984, 0.989, 0.996, 1.002, 1.005, 1.006, 1.004, 1.001, 0.999, 0.998, 0.998, 0.999, 1, 1); /* GSAP elastic.out(1, 0.3) 표본 33점 */
  --ease-bounce-out: linear(0, 0.007, 0.03, 0.066, 0.118, 0.185, 0.266, 0.362, 0.473, 0.598, 0.739, 0.894, 0.97, 0.897, 0.838, 0.794, 0.766, 0.752, 0.752, 0.768, 0.798, 0.843, 0.903, 0.977, 0.973, 0.948, 0.938, 0.942, 0.962, 0.996, 0.987, 0.986, 1); /* GSAP bounce.out 표본 33점 */

  /* ── 길이 (Tailwind 이름공간 밖 — 모션 규칙표와 같은 값) ── */
  --duration-press: 120ms;
  --duration-hover: 160ms;
  --duration-menu-out: 200ms;
  --duration-accordion: 280ms;
  --duration-menu-in: 320ms;
  --duration-reveal: 420ms;
  --duration-jump: 600ms;
  --duration-demo: 1000ms;   /* attract 루프 한 갈래 = 1.00s(레인 라벨과 같은 값) */
}