/* tokens.css — 프로젝트가 바뀌어도 유지되는 뼈대. 값은 조정 가능하지만 구조는 유지 */

:root {
  /* 간격: 4px 기반 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-section: clamp(64px, 10vw, 160px);
  /* 섹션 안에서 "제목·설명 묶음 → 본문 콘텐츠" 간격. 768px 이상에서 넓어짐(아래) */
  --space-content: var(--space-8);

  /* 타입 스케일: 모바일~데스크톱 유동 */
  --text-2xs: 0.6875rem;  /* 11px: small print only (captions, credits). Do not go below */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-4xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --text-display: clamp(3rem, 1.5rem + 7vw, 7.5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.7;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* 레이아웃 */
  --container-max: 1280px;
  --container-pad: clamp(20px, 5vw, 64px);
  --measure: 65ch;
  --grid-gap: var(--space-5);

  /* 브레이크포인트 (미디어쿼리에서는 값을 직접 사용) 
     sm 640px / md 768px / lg 1024px / xl 1280px */

  /* 라운드 (brand.css에서 오버라이드 가능) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 999px;

  /* 그림자: 떠 있는 요소에만 */
  --shadow-float: 0 8px 32px -8px rgb(0 0 0 / 0.18);

  /* 모션 */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 480ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* 히어로 스크롤 구간: 화면 높이의 몇 배만큼 스크롤하는 동안 영상 3장면이 재생되는지 (장면당 1/3).
     4.5 = 장면당 화면 1.5개 분량 */
  --hero-scroll: 4.5;

  /* 히어로 타이밍. 조정은 여기서만 (js/hero.js가 읽음). 구간 값은 장면 길이 기준(장면 1개 = 1) */
  --hero-type-shift: 12vh;   /* 텍스트가 올라오고 사라질 때 움직이는 거리, px 또는 vh */
  --hero-type-shift-last: var(--space-5); /* 장면 3만: 올라오는 거리. 짧게 해서 아래 "Art-directed AI film" 라벨을 지나가지 않게 */
  --hero-type-in: 0.25;      /* 컷 직후 텍스트가 올라오는 구간 */
  --hero-type-out: 0.25;     /* 다음 컷 직전 텍스트가 사라지는 구간 */
  --hero-end-fade: 0.35;     /* 장면 3 끝에서 영상·텍스트가 흐려지는 구간 */
  --hero-scrub: 0.6;         /* 스크롤을 따라잡는 데 걸리는 시간(초), 0이면 즉시 */

  /* 레이어 */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (min-width: 768px) {
  :root {
    --space-content: var(--space-9);
  }
}

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