/* =============================================================
   もふ手帳 — デザインシステム / デザイントークン
   tokens.css : 色・タイポグラフィ・余白・角丸・影などの基礎変数
   ※ コーラル基調は不変。微調整のみ。
   ============================================================= */

:root {
  /* ---- ブランドカラー（メイン） ---- */
  --color-coral:        #D85A30;  /* メイン */
  --color-coral-dark:   #993C1D;  /* 濃 */
  --color-coral-soft:   #F0805A;  /* 明るめ（hover等の補助） */

  /* ---- 背景 ---- */
  --color-bg:           #FFFBF8;  /* オフホワイト */
  --color-bg-peach:     #FAECE7;  /* ペールピーチ */
  --color-surface:      #FFFFFF;  /* カード等の面 */

  /* ---- 文字 ---- */
  --color-text:         #4A1B0C;  /* 本文 */
  --color-text-sub:     #7A4A35;  /* 補助 */
  --color-text-faint:   #B7A18F;  /* 薄（プレースホルダ等） */

  /* ---- 罫線・状態色 ---- */
  --color-border:       #EAD7C8;  /* 罫線 */
  --color-success:      #0F6E56;  /* 成功 */
  --color-success-bg:   #E4F2ED;
  --color-warning:      #B3261E;  /* 警告 */
  --color-warning-bg:   #FBE9E7;

  /* ---- 種別ピル用アクセント（控えめ） ---- */
  --pill-weight-bg:  #EEF3F0;  --pill-weight-fg:  #2F6B57;
  --pill-meal-bg:    #FCEFD9;  --pill-meal-fg:    #9A6516;
  --pill-poop-bg:    #F1E8DF;  --pill-poop-fg:    #7A5A3C;
  --pill-walk-bg:    #E7F0F4;  --pill-walk-fg:    #2C6079;
  --pill-clinic-bg:  #F3E8F0;  --pill-clinic-fg:  #7A3C6A;
  --pill-vaccine-bg: #FBE9E7;  --pill-vaccine-fg: #9A2E27;
  --pill-med-bg:     #EDEAF6;  --pill-med-fg:     #574A8C;
  --pill-note-bg:    #FAECE7;  --pill-note-fg:    #7A4A35;

  /* ---- タイポグラフィ ---- */
  --font-base: "Zen Maru Gothic", "M PLUS Rounded 1c",
               -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Yu Gothic", Meiryo, sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px — フォーム最小サイズ（iOSズーム防止） */
  --fs-md:   1.0625rem; /* 17px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  1.875rem;  /* 30px */

  --lh-tight: 1.35;
  --lh-base:  1.7;

  /* ---- 余白（広め） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* ---- 角丸（やわらかい） ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- 影（やわらかい） ---- */
  --shadow-sm: 0 1px 3px rgba(74, 27, 12, 0.06);
  --shadow-md: 0 4px 16px rgba(74, 27, 12, 0.08);
  --shadow-lg: 0 10px 30px rgba(74, 27, 12, 0.10);
  --shadow-focus: 0 0 0 3px rgba(216, 90, 48, 0.22);

  /* ---- レイアウト ---- */
  --content-max: 560px;     /* コンテンツ最大幅 */
  --tabbar-h: 68px;         /* 下部タブバー高さ */
  --topbar-h: 56px;         /* 上部トップバー高さ */
  --tap-min: 44px;          /* 最小タップターゲット */
}