/*
 * 表示用フォントは自前で配信する。
 *
 * Google Fonts から読むと、日本語フォントは分割配信のため
 * 54リクエスト・712KB になり、訪問者のIPとリファラがGoogleへ渡る。
 * 「個人情報は入力していただきません」と書いているサイトとして、後者は整合しない。
 *
 * このサイトで実際に使う文字だけに絞ってある（scripts/build-fonts.py が生成）。
 * 見出しの文言を変えたら、必ず生成し直すこと。文字が欠けると豆腐になる。
 * Zen Maru Gothic / SIL Open Font License 1.1（public/fonts/OFL.txt）
 */
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/zen-maru-gothic-700.woff2") format("woff2");
}

@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/zen-maru-gothic-900.woff2") format("woff2");
}

/*
 * デザイントークン。
 * 色・サイズ・余白の実値をここでのみ定義し、他のCSSは変数を参照する。
 *
 * 【配色の考え方】
 * 防災サービスでは暖色が警戒色として機能する。ブランド色に暖色を使うと
 * 「ボタン」と「本当に危険な情報」が同じ色域で競合し、危険が埋もれる。
 * そこで色の意味を2軸に固定する。
 *
 *   緑（寒色）… ブランド・行動を促すボタン・達成した状態
 *   暖色      … リスクと緊急度。気象庁の震度階級色に準拠し、学習コストを下げる
 *
 * すべての色は白背景に対してコントラスト比4.5:1以上を満たすことを確認済み。
 */

:root {
  /* --- ブランド（緑＝良い状態・行動） --- */
  --color-primary: #2D6A4F;        /* 6.39:1 */
  --color-primary-hover: #1F4F3A;  /* 9.38:1 */
  --color-primary-weak: #E8F1EC;   /* 背景として使う淡い緑 */

  /*
   * ブランドの「面」。白地に緑の線だけでは世界観が出ないため、
   * ヒーローや日数カードは深緑の面に白抜きで組む。
   */
  --color-surface-brand: #1E4736;
  --color-surface-brand-deep: #16382A;
  --color-on-brand: #FFFFFF;
  --color-on-brand-muted: #BFD8CC;

  /*
   * 行動を促すCTA。緑の面の上で最も目を引く色として黄を使う。
   * リスク表示の暖色（#B45309系）とは明度・彩度が大きく異なり混同しない。
   * 文字は黒(#1A1D23)を載せる（黄地に白は読めない）。
   */
  /*
   * 運営元（株式会社ウィンスリー）のブランド3色。
   * 「三方よし」を表す社のしるしであり、本サービスの2軸配色
   * （深緑＝基準・安全／暖色＝リスクの度合い）とは別の系統。
   * リスクの度合いを表す用途には絶対に使わない。見出しの下線など、
   * すべての見出しに一律で付く装飾にだけ使う（一律なら信号にならない）。
   */
  --brand-win-1: #C0D028;
  --brand-win-2: #4DB5C2;
  --brand-win-3: #E55A7D;
  --brand-rule: linear-gradient(to right, var(--brand-win-1), var(--brand-win-2), var(--brand-win-3));

  --color-cta: #F5C543;
  --color-cta-hover: #EBB520;
  --color-on-cta: #1A1D23;

  /* 達成・完了。ブランドと同じ緑を意図的に使い、「緑＝良い」を一貫させる */
  --color-success: #2D6A4F;

  /* --- 面と文字 --- */
  --color-bg: #F7F8F6;
  --color-bg-sub: #FFFFFF;
  --color-border: #DDE2DC;
  --color-text: #1A1D23;           /* 16.88:1 */
  --color-text-muted: #5A6270;     /* 6.15:1 */

  /* --- リスクと緊急度（気象庁の震度階級色に準拠。暖色はここでのみ使う） --- */
  --color-alert-low: #B45309;      /* 注意       5.02:1 */
  --color-alert-mid: #C2410C;      /* 警戒       5.18:1 */
  --color-alert-high: #B91C1C;     /* 危険       6.47:1 */
  --color-alert-critical: #7E22CE; /* 極めて危険 6.98:1 */

  /*
   * --- 品目の用途 ---
   * 「何のために要る品目か」を示す色。上の緊急度スケールとは別の軸なので、
   * 同じ値を流用せず独立して定義する（赤が濃いほど危ない、という読み方をさせない）。
   * 地震とどの災害でも要るものは既定色のままにし、珍しい用途だけ色を変える。
   * 意味は必ず文字のラベルが持ち、色は補強にとどめる。
   */
  --color-purpose-volcano: #6D28D9; /* 火山灰 7.36:1 */
  --color-purpose-flood: #1D4ED8;   /* 浸水   6.31:1 */

  /* 規約で定義が求められる名称。上のリスク色と同じ値を参照して重複を避ける */
  --color-warning: var(--color-alert-mid);
  --color-danger: var(--color-alert-high);

  /* --- 書体 --- */
  /* 本文は可読性最優先のゴシック。見出しは丸ゴシックで親しみを出す */
  --font-sans:
    system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "BIZ UDPGothic", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  /*
   * 表示用の書体。丸ゴシックは字面に丸みがあるぶん字画が太く見えるため、
   * 小さい字に使うと字の内側が潰れて読みにくくなる。
   * 読み込んでいるウェイトも700と900だけで、この書体を指定する＝必ず太字になる。
   *
   * 【規約】--font-display は 1.25rem（20px）以上でのみ使う。
   * それ未満の見出し・ラベル・品目名は本文用の書体で組み、太さだけで階層を作る。
   */
  --font-display: "Zen Maru Gothic", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Typography */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-hero: 3rem;

  /* Spacing (8px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  /* z-index */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* タップ領域の最小サイズ */
  --tap-min: 44px;

  /* レイアウト */
  --content-width: 42rem;
}