/* テーマ ─ ★ このファイルには CSS変数だけを書く ★
 *
 * 配色を変えるときは、ここの値を差し替えるだけで済むようにする。
 * app.css / manage.css からは、この変数だけを参照し、色を直接書かない。
 * （docs/spec/DIRECTORY.md §3-2「パッケージ化を効かせる3つの仕掛け」）
 *
 * 値の根拠は docs/spec/SPEC.md「提案パレット」。
 * ロゴの紫・緑と、ホームページの配色を実測して決めたもの。
 *
 * ★ コントラスト比を測ったうえで役割を分けている。
 *   読者に高齢の利用者やその家族が含まれるため、本文は AAA（7:1）を狙う。
 *   緑とキャラメルは 2.3:1 前後しかなく、文字には使えない。面・線・アイコンに回す。
 */

:root {
  /* --- 背景と文字 ------------------------------------------------------- */
  --color-bg: #fffcf3;              /* 生成り。白より柔らかい（HPで最頻出） */
  --color-surface: #ffffff;         /* カード・フォームの面 */
  /* サイドバーの面。本文と見分けがつく程度に沈めつつ、
     この上に載る文字が AA を割らない明るさに留めている。
     本文 6.77:1 / 紫のリンク 5.08:1。
     ★ これ以上暗くすると、薄い灰色の文字（--color-text-muted）が
       4.5:1 を割る。サイドバーの中では muted を使わないこと。 */
  --color-surface-muted: #f9f5ea;
  --color-text: #5c5548;            /* 本文。生成り背景に 7.19:1（AAA） */
  --color-text-muted: #7a7264;      /* 補足。生成り背景に 4.63:1（AA） */

  /* --- ブランド --------------------------------------------------------- */
  --color-primary: #7b59a2;         /* 紫。ロゴの「ひいらぎ」。5.40:1（AA） */
  --color-primary-strong: #6b4c8e;  /* 主ボタン。白文字で 6.89:1 */
  --color-accent: #69bc82;          /* 緑。ロゴのひし形と葉。★文字には使わない★ */
  --color-accent-strong: #2a7c60;   /* 緑のボタン。白文字で 5.06:1（AA） */
  --color-line: #c69c6d;            /* キャラメル。罫線・飾り。★文字には使わない★ */

  /* --- 状態 ------------------------------------------------------------- */
  --color-danger: #a4343a;          /* エラー。生成り背景に 6.54:1（AA） */
  --color-danger-bg: #fdf0f0;
  --color-warn: #8a5a1c;            /* 注意（記入漏れなど）。下の面に 5.48:1（AA） */
  --color-warn-bg: #fdf6e8;
  --color-border: #e5dccb;

  /* --- 文字 ------------------------------------------------------------- */
  --font-family-base:
    system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI",
    "Meiryo", sans-serif;
  --font-size-base: 17px;           /* 一般的な16pxより1段大きく */
  --font-size-small: 15px;
  --font-size-large: 19px;          /* 導入文・サイドバーの見出し */
  --font-size-heading: 24px;
  --font-size-subheading: 20px;     /* 設定画面の区分の見出し */
  --line-height-base: 1.8;          /* 行間は広めに取る */

  /* --- 余白と形 --------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --radius: 8px;
  --tap-min: 48px;                  /* ボタン・リンクの最小の高さ */

  /* --- レイアウト ------------------------------------------------------- */
  /* 中央に寄せる画面（ログイン・2段階認証）の幅の上限。
     ★ サイドバー付きの画面（管理画面の中）では使わない。
       使うと画面が広いときに左右へ余白が入り、サイドバーが左端から離れる。 */
  --page-max: 1200px;
  /* 2カラムに切り替える幅。これ未満は1カラム（スマホ・タブレット縦） */
  --split-at: 900px;
  /* サイドバーの幅。広い画面でだけ使う */
  --sidebar-width: 240px;
  /* 本文の最大幅。設定画面のように入力欄が縦に続く画面で、
     1行が長くなりすぎて読みにくくなるのを防ぐ */
  --content-max: 760px;
}