/* retinal — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간, 선언은 :root — 브라우저는 @theme 를 읽지 않는다, lessons #73)
 * 색은 OKLCH 로 정해 hex 로 굳혔다. 괄호 안이 정한 값(L C h).
 * 색면 계열(--color-field-* · --color-stim-*)은 전부 L 0.60 근처 — 상대 휘도 0.18~0.26 안. 광과민 안전 규칙의 근거다(DESIGN.md).
 */
:root {
  /* 바탕 · 잉크 — 따뜻한 먹 */
  --color-bg: #1d1815;            /* 먹 (0.215 0.010 55) — #080b0d 와 ΔE 0.069, #010203 과 0.133 */
  --color-surface: #27221e;       /* 판 — 베젤 받침·도크 (0.255 0.010 58) */
  --color-line: #3d3732;          /* 머리카락 선 (0.34 0.012 62) — 장식 선, 글자에 쓰지 않는다 */
  --color-ink: #ece7df;           /* 잉크 (0.93 0.012 80) */
  --color-ink-muted: #ada79e;     /* 보조 잉크 (0.73 0.014 75) */
  --color-ink-faint: #706b64;     /* 비활성 (0.53 0.012 70) — 비활성 단추·자리 눈금만 */

  /* 강조 — "지금" 을 가리키는 것에만(현재 단계 점·진행 선·초점 링·예측 눈금). 채운 면 0 */
  --color-accent: #58d1e5;        /* 청록 (0.80 0.110 210) — 실험 ① 잔상의 예측 색상각과 같다 */

  /* 색면 — 셰이더가 그리는 면. 강조색이 아니다(UI 에 쓰지 않는다) */
  --color-field-plate: #808080;   /* 중립 회색 (0.60 0 —) — 확인 단계의 바탕, 상대 휘도 0.216 */
  --color-stim-warm: #ca564b;     /* 붉은 자극 (0.60 0.150 28) — ① 응시 */
  --color-stim-warm-soft: #a96f67; /* 옅은 붉음 (0.60 0.075 28) — ② 왼쪽 둘레 · ③ 흐린 점 */
  --color-stim-cool-soft: #438d98;/* 옅은 청록 (0.60 0.075 208) — ② 오른쪽 둘레 · ③ 흐린 점 */
  --color-ghost: #2d8f9e;         /* 예측 견본 (0.60 0.090 210) — 해설 단계의 작은 원반·견본에만 */
  /* ① 기록 견본 띠 — L 0.60 · C 0.09, 색상각 150~270 을 20° 간격(210 은 --color-ghost) */
  --color-swatch-150: #578f63;
  --color-swatch-170: #3f9278;
  --color-swatch-190: #2e918c;
  --color-swatch-230: #3f8aac;
  --color-swatch-250: #5584b4;
  --color-swatch-270: #6b7db6;
  --color-ring-lo: #767676;       /* ④ 고리 어두운 쪽 (0.565 0 —) */
  --color-ring-hi: #8a8a8a;       /* ④ 고리 밝은 쪽 (0.635 0 —) — 두 고리 상대 휘도 차 0.073 < 0.10 */
  --color-fixation: #1d1815;      /* 응시점 — 색면 위 4.45:1 */

  /* 서체 — Bodoni Moda 는 라틴·숫자만 있다(unicode-range U+0000-00FF 등). 한글은 같은 쌓기의 Hahmlet 이 받는다 */
  --font-display: "Bodoni Moda", "Hahmlet", "Noto Serif KR", serif;
  --font-numeric: "Bodoni Moda", serif;
  --font-body: "Pretendard Variable", "Pretendard", system-ui, sans-serif;

  /* 글자 크기 — 지시판은 container-type: inline-size 상자 안에서 쓴다(cqi 는 쓰는 자리에서 풀린다).
   * 10.6cqi = 글자 칸 ÷ 9.43 — 가장 긴 지시문 줄 8.82em(순수 Hahmlet 8.98em)이 늘 들어맞는다. wireframe 폭 표 */
  --text-display: clamp(2rem, 10.6cqi, 3.25rem);
  --text-timer: clamp(2.75rem, 1.6rem + 2.4vw, 4.5rem);
  --text-h2: clamp(1.75rem, 1.15rem + 1.6vw, 2.5rem);
  --text-label: 1.125rem;         /* Bodoni 이탤릭 실험 이름 */
  --text-lead: 1.0625rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.8125rem;      /* 13px — 이보다 작은 글자 0 */
  --text-display--line-height: 1.16;
  --text-body--line-height: 1.7;

  /* 간격 — 4px 단위 */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-dock: 4rem;           /* 아래 도크 높이(64px) — + env(safe-area-inset-bottom) */
  --spacing-bezel: 0.75rem;       /* 베젤 받침 두께(12px) */
  --spacing-measure: 36rem;       /* 본문 한 줄 최대 폭 */

  /* 모서리 — 색면은 각이 진 도판, 기구만 살짝 둥글다 */
  --radius-none: 0;
  --radius-bezel: 0.375rem;       /* 바깥 받침 6px — 안쪽 색면은 0 */
  --radius-control: 0.25rem;      /* 단추 4px — 알약 0 */

  /* 그림자 */
  --shadow-bezel: inset 0 1px 0 0 rgb(236 231 223 / 0.06), 0 0 0 1px #3d3732, 0 2rem 4rem -2rem rgb(0 0 0 / 0.55);
  --shadow-dock: 0 -1px 0 0 #3d3732;
  --shadow-focus: 0 0 0 2px #1d1815, 0 0 0 4px #58d1e5;

  /* 이징 — linear 는 셰이더 시간축(고리 흐름)에만 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-instrument: cubic-bezier(0.32, 0.72, 0, 1);
}