/* ============================================================
   tokens.css — 전 작품 공통 디자인 토큰 (Wave 0 동결본)
   READ ONLY. 이 파일은 어떤 작품에서도 수정하지 않는다.
   작품별 재정의는 style.css 의 :root 에서, SPEC.md 4절의 8개 토큰만.
   ============================================================ */

:root {
  /* ── 브랜드 슬롯 ─ 작품별 재정의 허용 ────────────────────── */
  --brand:       #1a1a1a;
  --brand-ink:   #ffffff;
  --accent:      #c9a227;
  --accent-ink:  #1a1a1a;

  /* ★v1.3 — 브랜드 컬러를 "글자"로 쓸 때의 색. 기본값은 --brand 와 같다.
     형광 핑크·앰버·오커처럼 채도 높은 브랜드 컬러는 밝은 지면에서 2.3~2.9:1 이라
     면(배경)으로는 되지만 글자로는 기준 미달이다. 그런 경우에만 어둡게 재정의한다.
     예) --brand-text: color-mix(in oklab, var(--brand) 72%, var(--brand-ink)); */
  --brand-text:  var(--brand);
  --surface:     #ffffff;
  --surface-alt: #f7f6f4;

  /* ── 중립 색 ─ 재정의 금지 ──────────────────────────────── */
  --ink:         #16181d;   /* 17.0:1 on --surface */
  --ink-2:       #4a4f57;   /*  7.9:1 */
  --ink-3:       #636971;   /*  5.5:1 on #fff · 4.9:1 on #f1f0ec
                                ★v1.8 용도 확정 — **플레이스홀더·비활성·장식 전용**.
                                본문성 텍스트(캡션·표 헤더·푸터 고지)에는 쓰지 마라.
                                --surface-alt 나 유리·스크림 위에서는 어차피 미달이라,
                                여섯 배치가 전부 --ink-2 로 갈아끼우는 결론에 도달했다.
                                중간 톤이 필요하면 --ink-2 를 쓰고 크기·굵기로 위계를 만들어라. */
  --ink-4:       #b4b9c0;   /*  1.9:1 — ★읽어야 하는 텍스트에 절대 쓰지 마라.
                                비활성 상태·장식용 구분선·플레이스홀더 전용. */
  --line:        #e4e6ea;
  --line-strong: #c8ccd2;

  /* ── 폰트 슬롯 ──────────────────────────────────────────── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  --font-display: var(--font-sans);          /* 무드별 재정의 허용 */
  /* 등폭 폰트에는 한글 글자가 없다. 대체를 안 적어 두면 브라우저가
     시스템 기본(윈도우 맑은고딕)으로 떨어뜨려, 한 줄 안에서
     "2막 22장" 의 숫자와 한글이 서로 다른 서체로 갈린다.
     896곳이 이 토큰을 쓰고 그중 상당수에 한글이 섞여 있다.
     라틴·숫자는 등폭으로, 한글은 본문과 같은 Pretendard 로 받는다. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Pretendard Variable", Pretendard, monospace;

  /* ── 타이포 스케일 ─ fluid 375→1280 · 재정의 금지 ────────── */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, 1.0203rem + 0.1802vw, 1.125rem);
  --fs-lg:   clamp(1.25rem,   1.1655rem + 0.3604vw, 1.375rem);
  --fs-xl:   clamp(1.5rem,    1.2465rem + 1.0811vw, 1.875rem);
  --fs-2xl:  clamp(1.875rem,  1.4523rem + 1.8018vw, 2.5rem);
  --fs-3xl:  clamp(2.25rem,   1.3706rem + 3.7500vw, 3.5rem);
  --fs-4xl:  clamp(2.75rem,   1.2500rem + 6.3964vw, 5rem);
  --fs-5xl:  clamp(3.25rem,   0.7162rem + 10.8108vw, 7rem);

  --lh-tight: 1.12;
  --lh-snug:  1.30;
  --lh-base:  1.65;
  --lh-loose: 1.85;

  --ls-tighter: -0.04em;
  --ls-tight:   -0.025em;
  --ls-snug:    -0.012em;
  --ls-base:     0;
  --ls-wide:     0.08em;
  --ls-widest:   0.2em;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ── 스페이싱 ─ 4px 기반 · 재정의 금지 ──────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* 48개 작품이 같은 수직 리듬을 갖게 하는 핵심 토큰 */
  --section-y: clamp(4rem, 2.4865rem + 6.4865vw, 8rem);
  --gutter:    clamp(1.25rem, 0.7770rem + 2.0270vw, 2.5rem);

  --container:        1200px;
  --container-narrow:  760px;
  --container-wide:   1440px;

  /* ── 라운드 ─ --r 만 재정의 허용 ────────────────────────── */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;
  --r: var(--r-md);

  /* ── 그림자 ─ 재정의 금지 ───────────────────────────────── */
  --sh-sm: 0 1px 2px rgba(16,18,22,.06), 0 1px 3px rgba(16,18,22,.08);
  --sh-md: 0 4px 12px rgba(16,18,22,.07), 0 2px 4px rgba(16,18,22,.05);
  --sh-lg: 0 12px 32px rgba(16,18,22,.10), 0 4px 8px rgba(16,18,22,.05);
  --sh-xl: 0 24px 64px rgba(16,18,22,.12), 0 8px 16px rgba(16,18,22,.06);

  /* ── 모션 ─ 재정의 금지 ─────────────────────────────────── */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.30,1);
  --ease-in:   cubic-bezier(.55,.06,.68,.19);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 560ms;

  /* ── z-index ────────────────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
}

/* 브레이크포인트는 CSS 변수로 쓸 수 없다 (미디어쿼리는 var() 미지원).
   SPEC.md 2절의 리터럴 3종만 사용할 것: 768px / 1024px / 1280px  */