/**
 * tokens.css
 * ------------------------------------------------------------------
 * アプリ全体のデザイントークン（色・余白・角丸・影・速度）を定義する。
 * 他のCSSファイルはここで定義した変数のみを参照し、
 * カラーコード等のハードコーディングを禁止する。
 * ------------------------------------------------------------------
 */

:root {
  /* ===== カラー（要件指定） ===== */
  --bg: #F8F6F1;
  --surface: #FFFCF8;
  --primary: #C89F6A;
  --primary-dark: #8B6A4E;
  --accent: #7A9B76;
  --text: #4B3A2F;
  --sub-text: #6B5B4B;
  --border: #E6DDCF;

  /* ===== 派生カラー（状態表現用） ===== */
  --surface-hover: #F3EEE4;
  --danger: #C97A6A;
  --overlay-scrim: rgba(75, 58, 47, 0.45);

  /* ===== 角丸（iOSライク） ===== */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ===== 余白スケール ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ===== 影（控えめ・温かみ） ===== */
  --shadow-sm: 0 1px 3px rgba(75, 58, 47, 0.08);
  --shadow-md: 0 4px 12px rgba(75, 58, 47, 0.10);
  --shadow-lg: 0 8px 24px rgba(75, 58, 47, 0.14);

  /* ===== タイポグラフィ ===== */
  --font-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;

  /* ===== アニメーション速度（設定画面で倍率変更可） ===== */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== レイアウト ===== */
  --header-height: 56px;
  --tabbar-height: 64px;
  --max-content-width: 560px;
}