/* =====================================================================
 * myFIT ナビ V2 ― デザインの基本の値
 * ---------------------------------------------------------------------
 * 元にした資料: 「Warm cream editorial」スタイル資料（DESIGN.md / tokens.json）
 *   卵の殻の白い紙、黒いインク、細い見出し。
 *   紫とオレンジの2色は「飾り」と「状態の小さな点」にだけ使い、
 *   ボタンや文字の色にはしない。
 * Webフォントは読まない（端末の書体なら速く、圏外でも同じ表示になる）。
 * ===================================================================== */
:root {
  /* 紙とインク */
  --color-eggshell: #fdfcfc;
  --color-warm-taupe: #f5f3f1;
  --color-stone: #ebe8e4;
  --color-ink: #000000;
  --color-graphite: #44403b;
  --color-smoke: #777169;
  --color-ash: #a59f97;
  --color-button-line: #e5e5e5;

  /* 飾りの火花。UI の部品には使わない */
  --color-violet-spark: #0447ff;
  --color-ember-orange: #ff4704;
  --color-blush: #ff8fb1;

  /* 書体。見出しは細く（300）、本文は 400/500 */
  --font-display: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 文字の大きさ */
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 15px;
  --text-subheading: 18px;
  --text-heading-sm: 28px;
  --text-heading: 32px;
  --text-display: 44px;
  --tracking-display: -0.02em;
  --tracking-body: 0.01em;

  /* 余白（4px 刻み） */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;

  /* 角丸。カードは 20〜24px、ボタンと札は丸く */
  --radius-sm: 10px;
  --radius-input: 14px;
  --radius-card: 20px;
  --radius-large: 24px;
  --radius-full: 9999px;

  /* 影はほとんど見えないものだけ */
  --shadow-whisper: rgba(0, 0, 0, 0.4) 0 0 1px 0, rgba(0, 0, 0, 0.04) 0 1px 1px 0, rgba(0, 0, 0, 0.04) 0 2px 4px 0;
  --shadow-inset: rgba(0, 0, 0, 0.075) 0 0 0 0.5px inset;
}