/*
 * dana-koh — 디자인 시스템 정본 (A안 Onion Skin · lens: high-end-visual-design)
 * 이름은 Tailwind 4 @theme 이름공간 그대로다 — 승급 때 첫 :root 블록을 globals.css 의 @theme 로 옮긴다.
 * 두 번째 :root 블록(@theme 밖)은 이름공간이 없는 값 — 승급 때도 :root 에 남긴다.
 * style.css 는 여기 있는 var() 만 쓴다. 값의 "왜" 는 _design/DESIGN.md.
 */

:root {
  color-scheme: light;

  /* ── color ─────────────────────────────────────────────────────────── */
  --color-bg: #cfd8e3; /* 클레이 그레이 — 재질 입히기 전의 3D 스튜디오. OKLCH h253, 종이색 아님 */
  --color-surface: #e6ebf1; /* 작업 액자의 매트 · 패널 */
  --color-surface-raised: #f4f7fa; /* 클레이 도형의 하이라이트 · 가장 밝은 면 · 먹 바탕 위 글자 */
  --color-ink: #0d1320; /* 본문 · 제목 · 본 프레임 */
  --color-ink-muted: #3f4a5c; /* 보조 글 · 캡션 · 메타 */
  --color-line: #8e9aab; /* 눈금자 틱 · 모션 패스 점선 · 구분선 — 장식, 글자에 쓰지 않는다 */
  --color-clay-shade: #a9b5c4; /* 클레이 도형의 그늘 — 장식 */
  --color-clay-deep: #7f8ca0; /* 클레이 도형의 가장 어두운 면 · 접지 그림자 — 장식 */
  --color-accent: #f5283c; /* 어니언 레드 — 잔상 · 키프레임 ◆ · 재생 헤드. 면과 선에만 */
  --color-accent-ink: #a31a28; /* 강조를 글자로 쓸 때 · 포커스 링 */

  /* ── font ──────────────────────────────────────────────────────────── */
  --font-display: "Anybody", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --font-weight-body: 400;
  --font-weight-strong: 600;
  --font-weight-title: 700;
  --font-weight-display: 800;

  /* ── text (fluid) ──────────────────────────────────────────────────── */
  /* 히어로 이름 — 폭 130% 의 "DANA" 가 3.897em(실측)이라 크기를 폭에서 거꾸로 정했다:
     320 → 71px(277/280) · 390 → 78px(306/350) · 1440 → 190px(741px = cols 1–7 안) */
  --text-name: clamp(4.25rem, calc(2.3125rem + 10.63vw), 12.5rem);
  --text-name--line-height: 0.82;
  --text-display: clamp(5.5rem, 10vw, 9rem); /* 사례 제목 — 폭 50% 로 눌러 쓴다. "SOFT MACHINES" 4.006em → 1440 에서 577px */
  --text-display--line-height: 0.86;
  --text-email: clamp(2.25rem, 5.6vw, 5.25rem); /* 연락 이메일 — 130%·700 에서 13.43em → 1440 에서 1083px, 모바일은 70% 로 249px */
  --text-email--line-height: 1;
  --text-figure: clamp(2rem, 2.8vw, 2.5rem); /* 제작 숫자 */
  --text-figure--line-height: 1;
  --text-title: clamp(1.5rem, 2.2vw, 2rem); /* 섹션 제목 · 작업 제목 */
  --text-title--line-height: 1.15;
  --text-lead: clamp(1.125rem, 1.5vw, 1.375rem); /* 정체성 한 줄 · 소개 리드 */
  --text-lead--line-height: 1.55;
  --text-body: 1.0625rem; /* 17px — 한글 본문 */
  --text-body--line-height: 1.7;
  --text-small: 0.875rem; /* 14px — 캡션 둘째 줄 · 크레딧 */
  --text-small--line-height: 1.55;
  --text-meta: 0.75rem; /* 12px — mono 대문자 메타 · 프레임 라벨 (최소 크기) */
  --text-meta--line-height: 1.4;

  --tracking-name: -0.035em;
  --tracking-display: -0.02em;
  --tracking-meta: 0.08em;

  /* ── spacing ───────────────────────────────────────────────────────── */
  --spacing: 0.25rem; /* 4px 척도 — 나머지 간격은 이 배수 */
  --spacing-edge: clamp(1.25rem, 4.45vw, 4rem); /* 페이지 가장자리 — 390 에서 20px, 1440 에서 64px */
  --spacing-gutter: clamp(1rem, 1.7vw, 1.5rem); /* 열 거터 */
  --spacing-block: clamp(5rem, 11vw, 10rem); /* 블록 사이 */
  --spacing-stack: 1.5rem; /* 블록 안 문단·요소 사이 */
  --spacing-mat: 0.375rem; /* 액자 매트 두께 (Double-Bezel 1겹) */
  --spacing-ruler: 1.5rem; /* 데스크톱 눈금자 띠 높이 */
  --spacing-ruler-mobile: 0.5rem; /* 모바일 눈금자 (틱만) */
  --spacing-header: 3.5rem;
  --spacing-target: 2.75rem; /* 44px 터치 타깃 */

  /* ── radius ────────────────────────────────────────────────────────── */
  --radius-frame: 0.25rem; /* 자리표시자 판 */
  --radius-mat: 0.625rem; /* 매트 = 판 반지름 + 매트 두께 */
  --radius-key: 0.0625rem; /* 키프레임 ◆ (회전한 정사각형) */
  --radius-pill: 999px;

  /* ── shadow — 넓고 옅게 (Soft Structuralism) ───────────────────────── */
  --shadow-frame: 0 1px 1px rgb(13 19 32 / 0.06), 0 14px 36px -12px rgb(13 19 32 / 0.28);
  --shadow-frame-lift: 0 2px 2px rgb(13 19 32 / 0.06), 0 28px 60px -18px rgb(13 19 32 / 0.34);
  --shadow-contact: 0 12px 16px -10px rgb(13 19 32 / 0.45); /* 클레이 도형의 접지 그림자 */

  /* ── ease ──────────────────────────────────────────────────────────── */
  --ease-settle: cubic-bezier(0.2, 0.9, 0.1, 1); /* 다나가 좋아하는 이징 — 들어올 땐 빠르게, 설 땐 천천히 */
  /* impeccable-disable-next-line bounce-easing: 모션 디자이너 포트폴리오의 주제가 "살짝 넘쳤다 선다"(squash & stretch 의 settle)다. 한 번 넘치고 서며 반복하지 않는다 · 쓰는 곳은 ◆ 등장·액자 hover·이름 settle 셋뿐 */
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); /* 살짝 넘쳤다 선다 — Pop in · Squash & stretch */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 화면 안에서 A→B */
  --ease-scrub: linear; /* 스크롤 연동 재생 헤드 전용 — 다른 곳에 쓰지 않는다 */

  /* ── aspect ────────────────────────────────────────────────────────── */
  --aspect-wide: 16 / 9;
  --aspect-portrait: 4 / 5;
  --aspect-square: 1 / 1;
}

/* @theme 밖 — 이름공간이 없는 값 (승급 때도 :root) */
:root {
  /* 모션 길이 */
  --duration-instant: 120ms;
  --duration-quick: 240ms;
  --duration-settle: 480ms;
  --duration-stagger: 60ms;

  /* 어니언 스킨 — Anybody 폭 축(50–150%). 간격이 32→22→15→11 로 좁아진다 = ease-out 으로 서는 동작의 잔상.
     본 프레임을 150% 가 아니라 130% 로 둔 이유: 150% 의 "DANA" 는 4.51em 이라 390 에서 이름이 69px 로 작아진다 */
  --onion-1: 50%;
  --onion-2: 82%;
  --onion-3: 104%;
  --onion-4: 119%;
  --onion-final: 130%;
  --onion-alpha-1: 0.1;
  --onion-alpha-2: 0.18;
  --onion-alpha-3: 0.28;
  --onion-alpha-4: 0.42;
  --stretch-squash: 50%; /* 사례 제목 — 눌린 폭 (서체의 최솟값) */
  --stretch-email-squash: 90%; /* 이메일 hover — 130% → 90% → 130% */
  --stretch-email-narrow: 70%; /* 모바일(<640) 이메일 — 한 줄에 들어간다 */

  /* 콜라주 기울기 — 이 다섯 값만 쓴다(±3° 안). 모바일은 ±1.5° 이하 */
  --tilt-1: -2.5deg;
  --tilt-2: 3deg;
  --tilt-3: -1deg;
  --tilt-4: 1.5deg;
  --tilt-5: -2deg;

  /* 질감 — 고정 오버레이 입자 (CSP img-src data: 허용). opacity 는 쓰는 쪽에서 0.05 이하.
     SVG feTurbulence 160px 타일을 base64 로 — 평문 data URI 는 xmlns 문자열이 --check 의 외부 참조로 잡힌다 */
  --texture-grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIC4wNSAwIDAgMCAwIC4wNyAwIDAgMCAwIC4xMyAwIDAgMCAuOSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}