/* =========================================================
   tokens.css
   サイト全体のデザイン設定。

   ★通常のニュース更新・画像更新では触りません。
   ★文字サイズを画面を見ながら調整するときは主にここを変更します。
========================================================= */
:root {
  /* Key colors */
  --cyan: #00bfff;      /* Key color */
  --pink: #cd5082;      /* RGB 205 / 80 / 130 */

  /* Accessible/support colors */
  --cyan-dark: #006f91;
  --pink-dark: #9f2f5c;
  --ink: #1e2226;
  --ink-soft: #5f666d;
  --line: #d9dde1;
  --line-dark: #b8bec4;
  --paper: #ffffff;
  --paper-soft: #ffffff; /* all page surfaces are pure white */
  --dark: #171a1d;

  /* Font */
  --font-sans:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  /* Letter spacing / tracking
     日本語は詰め気味。ヘッダーの字間は layout.css 側で個別指定し、
     現在の見た目を維持します。 */
  --tracking-body: 0;
  --tracking-heading: 0.005em;
  --tracking-display: 0;
  --tracking-label: 0.05em;
  --tracking-caption: 0.015em;

  /* Typography - provisional. Adjust after visual review. */
  --fs-caption: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.05rem, 1.5vw, 1.18rem);
  --fs-subhead: clamp(1.2rem, 2vw, 1.5rem);
  --fs-section: clamp(1.65rem, 3vw, 2.15rem);
  --fs-page: clamp(2.6rem, 6vw, 5.4rem);

  /* Width */
  --site-width: 980px;
  --reading-width: 720px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-space: 60px;

  /* Spacing */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 44px;
  --sp-7: 60px;
  --sp-8: 72px;

  /* Radius: intentionally restrained */
  --radius-small: 3px;
  --radius-medium: 6px;
}

/* Responsive tokens */
@media (max-width: 640px) {
  :root {
    --gutter: 18px;
    --section-space: 44px;
    --fs-body: 0.96rem;
    --fs-lead: 1.02rem;
    --fs-section: clamp(1.55rem, 7vw, 1.9rem);
    --fs-subhead: 1.16rem;
  }
}

@media (max-width: 380px) {
  :root {
    --gutter: 16px;
  }
}