/* ==========================================================================
   book.crowdy.dev — 디자인 토큰
   spec.yaml design_tokens 의 구현. shadcn/ui slate 기준.
   색·라운드·간격은 여기서만 정의한다. 컴포넌트 CSS 는 var() 만 참조한다.
   ========================================================================== */

:root {
  /* --- shadcn slate: dark (기본 테마) --- */
  --background:            222.2 84% 4.9%;
  --foreground:            210 40% 98%;
  --card:                  222.2 84% 4.9%;
  --card-foreground:       210 40% 98%;
  --popover:               222.2 84% 4.9%;
  --popover-foreground:    210 40% 98%;
  --primary:               210 40% 98%;
  --primary-foreground:    222.2 47.4% 11.2%;
  --secondary:             217.2 32.6% 17.5%;
  --secondary-foreground:  210 40% 98%;
  --muted:                 217.2 32.6% 17.5%;
  --muted-foreground:      215 20.2% 65.1%;
  --accent:                217.2 32.6% 17.5%;
  --accent-foreground:     210 40% 98%;
  --destructive:           0 62.8% 30.6%;
  --destructive-foreground:210 40% 98%;
  --border:                217.2 32.6% 17.5%;
  --input:                 217.2 32.6% 17.5%;
  --ring:                  212.7 26.8% 83.9%;

  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 2px);
  --radius-lg: calc(var(--radius) + 4px);

  /* --- 타이포 스택 ---
     웹폰트를 받지 않는다(spec: tech.fonts). 로컬 설치 폰트 스택만 쓴다.
     UI 언어가 일본어이므로 일본어 폰트를 앞에 둔다. 한국어·영문 책 제목도
     표시되므로 한글·라틴 폴백을 뒤에 잇는다.
     본문/UI 는 고딕, 서지 제목은 명조 — 인쇄 서지 목록의 인상을 만든다. */
  --font-sans:
    system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo,
    "Noto Sans KR", "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;
  --font-serif:
    "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
    "Sarasa Mincho J", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- 타입 스케일 (clamp 로 미디어쿼리 없이 반응) --- */
  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.83rem);
  --step-0:  clamp(0.92rem, 0.89rem + 0.14vw, 1.00rem);
  --step-1:  clamp(1.08rem, 1.02rem + 0.28vw, 1.25rem);
  --step-2:  clamp(1.32rem, 1.20rem + 0.58vw, 1.70rem);
  --step-3:  clamp(1.70rem, 1.44rem + 1.28vw, 2.60rem);

  /* --- 간격 리듬 --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --container-max: 76rem;
  --header-height: 4rem;   /* 헤더 주입 전 자리를 예약해 깜빡임을 막는다 */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
}

/* --- shadcn slate: light. 토글은 optional(Q5). 값만 준비해 둔다. --- */
:root[data-theme="light"] {
  --background:            0 0% 100%;
  --foreground:            222.2 84% 4.9%;
  --card:                  0 0% 100%;
  --card-foreground:       222.2 84% 4.9%;
  --popover:               0 0% 100%;
  --popover-foreground:    222.2 84% 4.9%;
  --primary:               222.2 47.4% 11.2%;
  --primary-foreground:    210 40% 98%;
  --secondary:             210 40% 96.1%;
  --secondary-foreground:  222.2 47.4% 11.2%;
  --muted:                 210 40% 96.1%;
  --muted-foreground:      215.4 16.3% 46.9%;
  --accent:                210 40% 96.1%;
  --accent-foreground:     222.2 47.4% 11.2%;
  --destructive:           0 84.2% 60.2%;
  --destructive-foreground:210 40% 98%;
  --border:                214.3 31.8% 91.4%;
  --input:                 214.3 31.8% 91.4%;
  --ring:                  222.2 84% 4.9%;
}