/* デザイントークン。色・文字・余白の値はここにだけ書き、style.css からは変数で参照する。
   配色の由来: 藍（あい）染めの紺を主色に、刈安（かりやす）の黄を「戻ってきた時間」の印に使う。 */
:root {
  /* 色 */
  --paper: #F2F4F7;        /* 地。わずかに青みのある白 */
  --surface: #FFFFFF;      /* カード */
  --ink: #12162B;          /* 本文 */
  --ink-muted: #545A72;    /* 補足 */
  --line: #D9DDE6;         /* 罫線 */
  --ai: #24317A;           /* 藍。主色・AI が処理した時間 */
  --ai-deep: #141B47;      /* 濃い藍。暗い帯の地 */
  --ai-pale: #E4E8F7;      /* 薄い藍 */
  --kariyasu: #E8C23E;     /* 刈安。戻ってきた時間・強調 */
  --kariyasu-pale: #FAF1CF;
  --on-dark: #EEF0FA;      /* 暗い地の上の文字 */
  --on-dark-muted: #A9B0D6;
  --cost: #9AA0B5;         /* 比較対象（他社）の棒 */
  --danger: #B42318;       /* 入力の誤り */
  --danger-pale: #FDECEA;

  /* 文字 */
  --font-display: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-hero: clamp(2.6rem, 6.2vw, 5.4rem);
  --fs-h2: clamp(1.8rem, 3.6vw, 2.9rem);
  --fs-h3: 1.2rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* 余白・形 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 120px;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 24px;
  --container: 1160px;

  --shadow-card: 0 1px 2px rgba(18, 22, 43, 0.04), 0 8px 32px rgba(18, 22, 43, 0.06);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}