/* chartline — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간).
* 페이지는 이 파일을 로 싣고 style.css 는 var() 만 쓴다. 승급할 때 이 블록을 globals.css 의 @theme 로 옮긴다.
* 서체: +
* 대비 실측: node build.mjs --contrast chartline (DESIGN.md 대비표)
*/
:root {
/* ── 색 — 바탕 쪽(이름에 bg·surface·band·plate) ─────────────────────── */
--color-bg: #301c06; /* 탄 역청 — 따뜻한 흑. vantar ΔE 0.063 · luma 0.083 */
--color-surface: #3d260d; /* 올린 면 — 표 짝수 행 · 요약 칸 · 지표 칸 */
--color-band: #231404; /* 가라앉은 띠 — 꼬리 · 속보 띠 바탕 */
--color-plate: #f6efe4; /* 뼈색 막대 판 — Top 5 #2–#5 · 행 반전 · 뼈색 태그 */
--color-heat-plate: #bfff00; /* heat(애시드) 막대 판 — Top 5 #1 · 활성 탭 · 눌린 Pick */
/* ── 색 — 전경 쪽 ─────────────────────────────────────────────────── */
--color-ink: #f6efe4; /* 뼈색 잉크 — 역청 위 본문·숫자 */
--color-ink-dim: #bda88c; /* 흐린 잉크 — 크레딧·라벨·▼ 테두리 삼각형 */
--color-heat: #bfff00; /* 강조 1색(애시드 샤르트뢰즈) — ▲ · NEW · #1 · 포커스 링 · 스파크라인 이번 주 점 */
--color-ink-inverse: #301c06; /* 판 위 글자 — 뼈색·heat 막대 안의 숫자와 글자는 이것만 */
--color-rule: #5e4226; /* 격자선 1px — 장식선(글자 아님) */
/* ── 서체 ─────────────────────────────────────────────────────────── */
--font-display: "Sora", "Pretendard Variable", system-ui, sans-serif; /* 순위 숫자·제목·라벨 */
--font-body: "Pretendard Variable", "Pretendard", system-ui, -apple-system, sans-serif; /* 항목명·크레딧·설명 */
--font-data: "Sora", "Pretendard Variable", system-ui, sans-serif; /* 표·요약 숫자 — tabular-nums 필수 */
/* ── 글자 크기 (Tailwind 4: --text-<이름> + --text-<이름>--line-height) ─ */
--text-micro: 0.6875rem; /* 11px 대문자 라벨 · 자간 0.08em */
--text-micro--line-height: 1.2;
--text-xs: 0.75rem;
--text-xs--line-height: 1.3;
--text-sm: 0.875rem;
--text-sm--line-height: 1.4;
--text-base: 1rem;
--text-base--line-height: 1.5;
--text-lg: 1.25rem; /* 막대 안 항목명 */
--text-lg--line-height: 1.2;
--text-xl: 1.625rem;
--text-xl--line-height: 1.1;
--text-2xl: clamp(2rem, 3.2vw, 3rem); /* 구획 제목 */
--text-2xl--line-height: 0.95;
--text-3xl: clamp(3rem, 6.2vw, 5.75rem); /* 헤드라인 THE WEEK, RANKED LOUD. · 상세 제목 */
--text-3xl--line-height: 0.9;
--text-rank: clamp(1.75rem, 2.6vw, 2.5rem); /* 표 6–50 순위 숫자 */
--text-rank--line-height: 1;
--text-stat: clamp(3.5rem, 8vw, 7.5rem); /* 이번 주 요약 숫자 */
--text-stat--line-height: 0.85;
--text-slab: clamp(5.5rem, 13vw, 13.5rem); /* Top 5 막대 안 순위 숫자 */
--text-slab--line-height: 0.8;
--text-mega: clamp(12rem, 34vw, 32rem); /* 상세 거대 순위 숫자 */
--text-mega--line-height: 0.78;
--text-wordmark: clamp(4rem, 18vw, 17rem); /* 꼬리 워드마크(잘려 나간다) */
--text-wordmark--line-height: 0.8;
/* ── 간격 (4px 척도 + 이름 붙은 치수) ─────────────────────────────── */
--spacing: 0.25rem; /* Tailwind 4 기본 단위 */
--spacing-hair: 1px; /* 격자선 = grid gap 1px */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2.5rem;
--spacing-2xl: 4rem;
--spacing-3xl: 6rem;
--spacing-gutter: clamp(1rem, 2.2vw, 2rem); /* 칸 안쪽 여백 */
--spacing-masthead: 3rem; /* 48px */
--spacing-tabs: 4rem; /* 64px (모바일 3.5rem 은 style.css 에서 --spacing 으로) */
--spacing-ticker: 2.75rem; /* 44px */
--spacing-slab-max: 42.5rem; /* 680px — Top 5 #1 막대 높이 */
--spacing-slab-min: 21.25rem; /* 340px — 숫자 + 정보 3줄이 들어가는 최소 막대 */
--spacing-bar: 1.25rem; /* 모바일 가로 막대 두께 20px */
--spacing-bar-thin: 0.625rem; /* 표 SCORE 막대 10px */
--spacing-rule-bold: 2px; /* 10위 구획 괘선 · masthead 아래 괘선 */
/* ── 모서리 · 그림자 — 전부 0 (brutalist: 90° 모서리, 그림자 금지) ─── */
--radius-none: 0;
--shadow-none: none;
--shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-heat); /* 포커스 링 — 판 위에서도 보이게 역청 테두리를 먼저 */
/* ── 이징 (animation-vocabulary 이름은 DESIGN.md 모션 규칙) ─────────── */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* 막대 Scale in · Continuity transition */
--ease-snap: cubic-bezier(0.2, 0, 0, 1); /* 탭 판 · 행 반전 · Pick */
--ease-linear: linear; /* Marquee 전용 */
}