/* ==========================================================================
   RFS — Realtime Fluid Simulator · 디자인 토큰 SSOT
   실시간 GPU 유체 시뮬레이션 엔진 (데이터센터 열관리) 프로모션 사이트

   컨셉 : 암실과 사양서 — 유동이 있는 곳은 어둡고, 읽는 곳은 밝다
   프리셋: darkroom-spec (신규 정의. dark-instrument 를 쓰지 않은 이유는 아래)
   강조색: 계기 청색 1색. 라이트/다크는 규칙으로 정의된 한 쌍이므로 1종으로 센다

   ── 레퍼런스 실측 (2026-08-24, 1440px computed style)
   R1 구조 · luminary.ai (Physics AI 시뮬레이션 플랫폼)
       배경 #2A2C2F · GT Standard + GT Standard Mono 2패밀리
       h1 72px/600 · 본문 16px · 최대÷본문 4.5배
       radius 0px 1898회 지배 (8px 36 / 9999px 11)
       컨테이너 1425 전폭 ↔ 1297 ↔ 974 · 섹션 14
       히어로: 시뮬레이션 영상 1440×1440 이 첫 화면을 100% 덮는다
       → 가져온 원리: 시뮬레이션 결과가 히어로를 통째로 먹고 UI 는 무채색으로 물러난다.
         색은 시각물 안에서만 소리친다
       → 안 가져온 것: 섹션 14개, 비어 있는 h1(접근성 실패), 'Physics AI Factory' 류 조어

   R2 톤 · teenage.engineering / EP-133 (전자악기 — 다른 업종)
       배경 #F9FAF9 · te-20 + TechnoType 2패밀리
       radius 0px 2492회 지배 · 강조색 #FF5000 이 단 10회
       밝은 페이지 안에 다크 블록 #0F0E12 가 18회 · 컨테이너 1308 ↔ 1440 전폭
       최대 52.9px ÷ 본문 13.2px = 4.0배
       → 가져온 원리: 밝은 바탕 안에 어두운 밴드를 리듬으로 둔다. 강조색은 극히 아껴 쓴다
       → 안 가져온 것: h1 부재, 오렌지 색상 자체

   R1 보조 · simscale.com (CFD SaaS)
       배경 #F7F7F7 · Geist 1패밀리 · h1 49.78px/400 · 본문 15.38px (3.24배)
       radius 0px 2558회 + pill 114회 · 컨테이너 1192 본문 ↔ 1425 전폭 교대
       → 라이트 배경 CFD 사이트의 반례로 기록. 별점 리뷰 배너는 가져오지 않는다

   ── dark-instrument 프리셋을 쓰지 않은 이유
   이 저장소에 이미 dark-instrument 가 둘(Pulsegate 코발트, Synapse BCI 골드) 있다.
   셋째를 같은 프리셋으로 만들면 그것은 이 브리프의 결정이 아니라 카테고리 평균이다.
   RFS 는 파티클이 어두운 배경에서만 읽히지만(제품 실제 렌더 확인), 사양·도입 절차는
   밝은 종이에서 읽는 것이 낫다. 그래서 한 페이지를 두 체제로 나눈다 — 그것이 감수한 리스크다.

   ── 강조색의 출처
   제품 실물의 에디터 테마는 --theme-accent: #3b82f6 (Tailwind blue-500) 이다.
   그대로 쓰면 '색을 고르지 않았다'는 신호를 그대로 수입하게 되므로, 채도를 낮추고
   청록 쪽으로 틀어 계기 청색으로 옮겼다. 출발점은 제품의 실제 색이 맞다.
   ========================================================================== */

:root {
  /* ── 타이포그래피 스케일 — 5단계 + 스케일 밖 디스플레이 1개 ── */
  --step--1: 0.8125rem; /* 13px — 라벨·캡션·표 머리 */
  --step-0: 1rem; /* 16px — 본문 (한글 하한) */
  --step-1: 1.1875rem; /* 19px — 리드 문장 */
  --step-2: clamp(1.375rem, 1.15rem + 1.1vw, 1.9375rem); /* 22 → 31px — 섹션 헤딩 */
  --step-3: clamp(1.875rem, 1.4rem + 2.4vw, 3rem); /* 30 → 48px — 큰 헤딩 */
  --display: clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem); /* 40 → 72px — 히어로 전용 */
  /* 최대 ÷ 본문 = 72 ÷ 16 = 4.5배. R1(luminary) 과 같은 비율이다 */

  --leading-tight: 1.18;
  --leading-normal: 1.7; /* 한글 본문 하한 1.6 */
  --leading-loose: 1.85;
  --measure: 34em; /* 한글 한 줄 25~40자 */

  /* 라틴을 폴백 앞에 두면 라틴까지 한글 폰트로 그려진다 — Pretendard 는 둘 다 좋다 */
  --font-body: Pretendard, "Pretendard Variable", -apple-system, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── 색 · 사양서(라이트) 체제 ── */
  --surface: #f4f5f3;
  --surface-2: #eaece8;
  --surface-3: #dfe2dd;
  --line: #d3d7d1;
  --line-strong: #b6bcb5;
  --ink: #14171a;
  --ink-muted: #545c63; /* 6.23:1 */
  --ink-faint: #626a70; /* 5.10:1 — 13px 캡션도 AA 를 지켜야 하므로 처음 값(#7C858C·3.43:1)에서 내렸다 */
  --accent: #2a6b8a; /* 밝은 바탕 위 5.33:1 */
  --accent-hover: #1f5069;
  --accent-ink: #ffffff;
  --accent-wash: #e3ecf1;

  /* ── 색 · 암실(다크) 체제 — 위 값들의 규칙적 반전 ── */
  --dark-surface: #0e1114;
  --dark-surface-2: #14181c;
  --dark-surface-3: #1b2126;
  --dark-line: #262c31;
  --dark-line-strong: #3a434a;
  --dark-ink: #e8ecef;
  --dark-ink-muted: #98a3ab; /* 7.35:1 */
  --dark-ink-faint: #7b858c; /* 5.03:1 — 처음 값(#6D777E)은 4.14:1 로 미달이었다 */
  --dark-accent: #3e8fb0; /* 어두운 바탕 위 5.20:1 */
  --dark-accent-hover: #5aa6c4;
  --dark-accent-ink: #071016;
  --dark-accent-wash: #16303c;

  /* ── 온도 컬러맵 — 캔버스 안에서만 쓰는 데이터 인코딩이다.
     UI 강조색이 아니므로 강조색 카운트(하드 게이트 2)에서 제외한다.
     제품 실물의 파티클 렌더가 저온 시안 → 고온 그린이라 그 언어를 따랐다 ── */
  --temp-cold: #2f7d9e;
  --temp-mid: #39a894;
  --temp-warm: #8cc152;
  --temp-hot: #d7d64a;

  /* ── 형태 — R1·R2 둘 다 radius 0 이 지배한다. 어휘 1종으로 못박는다 ── */
  --radius: 0;

  /* ── 간격 — 저장소 SSOT 표준 ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);

  --container: 1120px;
  --container-wide: 1360px;
  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);

  /* ── 모션 ── */
  --dur-quick: 160ms;
  --dur-normal: 420ms;
  --dur-slow: 900ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}