/* 제품군 공통 토큰. 원본은 브랜치 agent/visit-landing 의 docs/design-system/ 이고,
   네 곳이 옮겨 적는다. 색은 담지 않는다 — 사이트마다 자기 강조색을 쓴다(결정 D6). */
:root {
  --r-badge: 6px; --r-control: 10px; --r-card: 14px; --r-pill: 999px;

  --fs-chip: .78rem; --fs-label: .86rem; --fs-sub: .94rem; --fs-body: 1rem;
  --fs-title: 1.08rem; --fs-h3: 1.35rem; --fs-h2: 2rem; --fs-display: 2.75rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --w-landing: 1120px; --w-read: 760px; --w-form: 440px;

  --header-h: 56px;
  --head-block: calc(var(--header-h) + var(--s4) * 2);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ─── 여기서부터 이 시리즈의 색. 강조는 5240.cloud 의 남색이다. ─── */
:root {
  --bg: #fbfbf9;
  --surface: #ffffff;
  --ink: #14161a;
  --read: #3d4450;
  --mute: #656d7a;
  --faint: #838b96;
  --line: #e6e5e0;
  --line-strong: #c7c6bf;
  --accent: #333D9D;
  --accent-text: #333D9D;
}

/* ─── 파스텔 다섯. 「다섯이 나란히 서는 자리」에서만 쓰고, 차례는 늘 같다. ───
   색조만 다르고 밝기와 맑기는 한 자로 맞췄다 — 다섯이 갈리되 흩어지지는 않는다.
   테두리·아이콘·글자는 어디서든 이 시리즈의 남색과 먹빛 그대로다.
   그림(SVG)은 이 변수를 읽지 못한다(<img> 로 걸리므로). 그림 안에는 같은 값을
   손으로 적고, coverage.test.mjs 가 여기와 그림이 어긋나지 않는지 본다. */
:root {
  --pastel-1: #E3E6F6;  /* 남보라 */
  --pastel-2: #DDEDF5;  /* 하늘 */
  --pastel-3: #E2F0E6;  /* 연둣빛 */
  --pastel-4: #FAEBE2;  /* 살구 */
  --pastel-5: #F1E7F3;  /* 연보라 */
}