/* =========================================================================
   Design tokens — 峯岸研究室サイト
   方針（docs/DESIGN.md）：白い地に、研究の写真と日本語の文章が主役。
   色は「深緑」1 色だけを、リンク・分類の文字・自己紹介の淡い面に使う。
   文字は真っ黒ではなく濃い灰色にして、明暗の差をやわらげる（それでも 4.5 : 1 以上）。
   大きな英字の見出し・番号の飾り・影・グラデーションは使わない。
   日本語は端末のゴシック体（Web フォントを読み込まない）。英数字だけ Source Sans 3 を使う。
   ========================================================================= */

/* 英数字だけに使う範囲（日本語の文中の「…」「—」は日本語の書体で組むため除く） */
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/source-sans-3-4320f018.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-2013, U+2016-2024, U+2027-206F, U+20AC, U+2122, U+2212;
}

:root {
  color-scheme: light;

  /* ---------- 文字 ---------- */
  --font-sans: "Source Sans 3", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "BIZ UDPGothic", "Yu Gothic UI", "YuGothic", Meiryo, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-sm: 0.8125rem;   /* 13px：日付・写真の説明 */
  --text-md: 0.875rem;    /* 14px：補足・一覧のリンク */
  --text-base: 1rem;      /* 16px：本文 */
  --text-lg: 1.1875rem;   /* 19px：研究の見出し */
  --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);      /* 20〜24px：節の見出し */
  --text-2xl: clamp(1.4375rem, 1.2rem + 0.9vw, 1.75rem);  /* 23〜28px：ページの見出し */
  --text-3xl: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);    /* 24〜30px：トップのひとこと */

  --leading: 1.95;
  --leading-tight: 1.6;

  /* ---------- 色 ---------- */
  --color-bg: #ffffff;
  --color-ink: #383838;          /* 本文 */
  --color-heading: #262626;      /* 見出し */
  --color-ink-soft: #444444;
  --color-muted: #666666;        /* 補足（白地で 5.7 : 1） */
  --color-subtle: #707070;       /* 日付・写真の説明（白地で 4.9 : 1） */
  --color-border: #e8e8e8;       /* 一覧の区切り */
  --color-rule: #dcdcdc;         /* 枠 */
  --color-border-strong: #8c8c8c;/* 入力欄の枠（白地で 3.4 : 1） */

  --color-primary: #2f5e4b;      /* 深緑：リンク・分類の文字・ボタン（白地で 7.4 : 1） */
  --color-primary-hover: #234a3b;
  --color-on-primary: #ffffff;
  --color-tint: #f1f6f2;         /* 深緑のごく淡い面（自己紹介・イベントの情報） */
  --color-tint-strong: #e2ece5;  /* 選択中・マウスを載せたとき */

  --color-surface: #f4f5f4;      /* フッター・管理画面の地 */
  --color-card: #ffffff;

  --color-success: #2f6b45;
  --color-success-soft: #e6f1e9;
  --color-danger: #a8362c;
  --color-danger-soft: #f9eae7;
  --color-warning: #7a5200;
  --color-warning-soft: #f7efdb;

  /* ---------- 形：写真と面は角を丸く、影は使わない ---------- */
  --radius-photo: 14px;
  --radius-panel: 20px;
  --radius: 8px;                 /* ボタン・入力欄 */
  --radius-sm: 4px;
  --hairline: 1px solid var(--color-border);
  --rule: 1px solid var(--color-rule);

  /* ---------- レイアウト ---------- */
  --container: 1080px;
  --container-narrow: 720px;
  --gutter: 40px;
  --section-space: 104px;

  /* ---------- 動き ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --section-space: 72px;
  }
}