/* Pellicle — 디자인 시스템 정본 (설계 3단계).
   이름은 Tailwind 4 @theme 이름공간을 따르되 선언은 :root 에 둔다 — 브라우저는 @theme 블록을 읽지 않는다(lessons #73).
   바탕은 사진의 색을 치우치게 하지 않는 중성 회색(채도 0) — 암실의 "주변 회색". 빨강은 안전등 한 색, 점·선·활성 상태만. */
:root {
  /* 바탕 — 채도 0 중성 회색 셋 */
  --color-bg: #222222;          /* 페이지 바탕 — 암실 주변 회색 */
  --color-bg-deep: #161616;     /* 라이트박스·사진 무대 — 사진 둘레를 한 단계 더 끈다 */
  --color-surface: #2c2c2c;     /* 명령 패널·서랍·자리표시자 판 */

  /* 잉크 — 대비는 DESIGN.md 대비표(실측) */
  --color-ink: #ededeb;         /* 본문·제목 */
  --color-ink-2: #a6a6a2;       /* 메타·보조 */
  --color-ink-3: #939391;       /* 캡션·EXIF 이름칸 — surface 위에서도 4.5 이상 */
  --color-ink-on-light: #161616; /* 밝은 단추(잉크 바탕) 위 글자 */

  /* 선 */
  --color-line: #3a3a3a;        /* 머리카락 선 — 장식 구분선(대비 의무 없음) */
  --color-line-strong: #7a7a77; /* 입력·단추 경계 — 비글자 3:1 */

  /* 덮개 — 서랍·시트 뒤를 한 단계 끈다(구현 4단계에서 더함: bg-deep 72%, 흐림 없음) */
  --color-overlay: rgb(22 22 22 / 0.72);

  /* 강조 — 안전등 빨강, OKLCH h 17.9°. 큰 면 금지(#52) */
  --color-safelight: #ff5468;

  /* 사진 색 필터 칩 8 — 사진의 색을 가리키는 표본이지 UI 강조색이 아니다 */
  --color-swatch-black: #1d2226;
  --color-swatch-gray: #9c9a94;
  --color-swatch-white: #e6e3dc;
  --color-swatch-blue: #4a6c8e;
  --color-swatch-green: #4c6b3a;
  --color-swatch-amber: #c99a3e;
  --color-swatch-red: #b23a34;
  --color-swatch-brown: #7a5a44;

  /* 사진 위 글자 막 — 높이 96px 캡션 상자에만 건다. 아래 55%는 0.75 검정 단색 → 흰 사진 위에서도 잉크 8.4:1 (qa-1 P3-4 로 0.65 → 0.75) */
  --gradient-scrim: linear-gradient(to top, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.75) 55%, rgb(0 0 0 / 0) 100%);
  --spacing-scrim: 6rem; /* 96 — 막 상자 높이. 글자는 아래 48 안에만 */

  /* 서체 — display 는 라틴 글자·숫자만(Manrope), 한글은 전부 Pretendard */
  --font-display: "Manrope", "Pretendard Variable", system-ui, sans-serif;
  --font-sans: "Pretendard Variable", "Pretendard", system-ui, sans-serif;
  --font-numeric: "Manrope", "Pretendard Variable", system-ui, sans-serif; /* tabular-nums 로 쓴다 */

  /* 글자 크기 */
  --text-2xs: 0.6875rem;  /* 11 — 프레임 번호·kbd */
  --text-xs: 0.75rem;     /* 12 — EXIF 이름칸·칩 */
  --text-sm: 0.8125rem;   /* 13 — 메타·캡션 */
  --text-base: 0.9375rem; /* 15 — UI 기본 */
  --text-md: 1.0625rem;   /* 17 — 설명 문단 */
  --text-lg: 1.25rem;     /* 20 — 사진 제목 */
  --text-xl: 1.75rem;     /* 28 — 컬렉션 목록 제목(라틴) */
  --text-display: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); /* 36→56 — 컬렉션·작가 이름(라틴) 단 하나 */
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.02em;

  /* 간격 — 4 의 배수 */
  --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-gutter: 0.5rem;        /* 메이슨리 사이 8 — 빼곡하게 */
  --spacing-gutter-sm: 0.375rem;   /* 1~2열에서 6 */
  --spacing-page: clamp(1rem, 0.4rem + 2.4vw, 2rem); /* 좌우 여백 16→32 */
  --spacing-header: 4rem;          /* 머리 높이 64 (모바일 52) */
  --spacing-header-sm: 3.25rem;
  --spacing-panel: 23.75rem;       /* 라이트박스 정보 칸 380 */
  --spacing-content-max: 86rem;    /* 1376 */

  /* 모서리 — 사진 2, 조작 4, 그 이상 없음 */
  --radius-photo: 2px;
  --radius-control: 4px;
  --radius-chip: 2px;
  --radius-swatch: 50%;

  /* 그림자 — 쓰지 않는다. 겹침은 바탕 단계(bg-deep·surface)와 선으로 */
  --shadow-none: none;
  --shadow-panel: 0 0 0 1px var(--color-line);

  /* 움직임 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 140ms;  /* 크롭 마크·누름·패널 닫힘 */
  --duration-base: 200ms;  /* 패널 열림·필터 전환 */
  --duration-slow: 240ms;  /* 라이트박스 열림·사진 넘김·이미지 페이드 인 */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}