/* ==========================================================================
   Design tokens. Change these first; every component reads from them.
   Names are semantic (bg / ink / accent), so a new client only edits values.

   REGEN NETWORKS, 2026-08-28. 값의 근거는 docs/design/2026-08-28-design-concept.md.
   색은 로고 벡터에서 뽑았다 (reference/brand/README.md).
   대비는 계산해서 확인했다. 본문 7:1, 보조 4.5:1, 큰 글자 3:1 기준.
   ========================================================================== */
:root {
  /* colour ------------------------------------------------------------
     자재 사진이 많은 사이트라 바탕은 흰색이어야 사진이 산다.        */
  --bg: #ffffff;           /* page ground */
  --surface: #f2f5f8;      /* cards, tables, swatch backdrops */
  --paper: #f8fafc;        /* forms */
  --ink: #0b1a2b;          /* headings, dark bands            17.6:1 on bg */
  --text: #2a3542;         /* body text                       12.5:1 on bg */
  --text-soft: #5a6674;    /* secondary   5.9:1 on bg, 5.4:1 on --surface */

  /* 로고 네이비. 링크와 버튼 바탕. 흰 글자를 얹어도 12.8:1 */
  --accent: #033264;
  /* 로고 시안 원색. 흰 바탕에서 3.9:1이라 글자에 쓰지 않는다.
     큰 숫자, 구분선, 호버 밑줄처럼 글자가 크거나 글자가 아닌 자리에만. */
  --accent-deep: #008bbf;
  /* 위 시안을 글자에 쓸 수 있을 만큼 내린 값. 13px 라벨은 전부 이걸 쓴다.
     흰 바탕 6.3:1, surface 위 5.7:1. 색감은 그대로 시안으로 읽힌다. */
  --accent-cyan: #00688c;
  /* 로고 최명부. 어두운 면 위에서만 쓴다 (ink 위 10.1:1) */
  --sky: #71d0f6;

  --ornament: #b7c6d4;     /* hairlines, ornaments, never text */
  --line: #d8e0e8;
  --on-ink: #e8eef4;       /* body on --ink                  15.0:1 */
  --on-ink-soft: #a9bccc;  /* secondary on --ink              9.0:1 */

  /* type --------------------------------------------------------------
     품번(H237 1.3 EE)과 수량이 많은 사이트다. 숫자가 또렷해야 한다.
     web-kit 기본 Fraunces(세리프 디스플레이)는 쓰지 않는다:
     감성이 아니라 사양을 읽히는 게 목적.
     Plex 한 가족으로 간다 - 본문 Sans KR, 품번 Mono. 자릿수가 맞아 표가 흔들리지 않고,
     Pretendard와 달리 Google Fonts에 있어서 외부 CDN을 하나 덜 쓴다.
     베트남어는 IBM Plex Sans(라틴)가 성조를 받는다. */
  --font-display: "IBM Plex Sans KR", "IBM Plex Sans", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-text: "IBM Plex Sans KR", "IBM Plex Sans", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display-leading: 1.12;
  --fs-display: clamp(34px, 5.2vw, 68px);
  --fs-h2: clamp(26px, 3.2vw, 42px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 19px;
  --fs-body: 17px;         /* 읽는 사람이 40~60대다. web-kit 기본 16px보다 한 단계 위 */
  --fs-small: 15px;
  --fs-label: 13px;        /* never below 13px: the readers are often 50+ on phones */

  /* layout */
  --container: 1240px;
  --gutter: 24px;
  --section: clamp(64px, 9vw, 128px);
  --header-h: 76px;
  --header-h-mobile: 64px;
  --radius: 0;             /* 모서리를 굴리지 않는다. 사양서의 인상이 목적이다 */
  --ease: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Languages with stacked diacritics (vi) need more leading in display type */
:root:lang(vi) { --display-leading: 1.2; }