/*
  デザイントークン(案1「クリアトラスト」)
  根拠: docs/design-directions.md / docs/reference-analysis/summary.md
  - 構造系の値(フォント・見出しサイズ・角丸・影・余白)は ref-1(office-tree.jp)の実測値を踏襲
  - アクセントは ref-1 の青 #2563eb の役割を、ブランドのドイツ赤に置換
  他のCSSは原則としてこのファイルの変数だけを参照する。
*/

:root {
  color-scheme: light dark;

  /* --- 色 --- */
  --color-base: #ffffff;
  --color-surface: #f3f4f6;          /* ref-1 実測: 淡グレー背景 */
  --color-surface-raised: #ffffff;   /* カード */
  --color-border: #e5e7eb;           /* ref-1 実測: 罫線 */
  --color-text: #1f2937;             /* ref-1 実測: 本文/見出し */
  --color-text-muted: #4b5563;       /* ref-1 の #6b7280 より1段濃くしてAAに余裕を持たせる(7.6:1) */
  --color-accent: #ba1a21;           /* ドイツ赤(チラシ実色)。白文字で 6.45:1 */
  --color-accent-strong: #961419;    /* ホバー時 */
  --color-accent-text: #ba1a21;      /* 文字として使うアクセント(ダークモードで明度を上げるため分離) */
  --color-on-accent: #ffffff;
  --color-highlight: #f9e05e;        /* ドイツ黄(チラシ実色)。面積は小さく、マーカー/バッジ用 */
  --color-highlight-soft: #fff8d6;
  --color-marker: #f9e05e;           /* 見出しマーカー(ダークモードでは透過させ文字との重なりを読みやすく) */
  --color-ink: #1b1311;              /* ドイツ黒(チラシ実色)。フッター・電話ボタン */
  --color-on-ink: #ffffff;
  --color-line: #00873c;             /* LINE公式色 #06c755 は白文字で2.26:1とAA未達のため、同系の濃緑(4.63:1)に調整 */
  --color-line-text: #ffffff;
  --color-success: #047857;
  --color-error: #b91c1c;

  /* --- 対応エリア図(assets/images/area-map.svg を埋め込んで使う) --- */
  --map-sea: #e4eaf0;              /* 海: ごく薄い青グレー */
  --map-land: #e5e7eb;             /* 周辺の市区町村 */
  --map-boundary: #ffffff;         /* 市区町村の境界(細い白線) */
  --map-main: #ba1a21;             /* 横浜市: ブランドの赤(不透明) */
  --map-focus: #f2c4c6;            /* 大和市・町田市: 同じ赤の淡い色調(不透明) */
  --map-ward-line: #e0777c;        /* 横浜市18区の境界: 塗りより少し明るい赤 */
  --map-pref-line: #9ca3af;        /* 都県境: やや濃いグレーの破線 */
  --map-label: #1f2937;
  --map-label-main: #ffffff;       /* 赤地の上の「横浜市」 */
  --map-halo: #ffffff;             /* 文字のふち取り(背景の色に関係なく読めるように) */
  --map-pin: #1b1311;

  /* --- フォント(ref-1 実測: Noto Sans JP) --- */
  --font-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;

  /* --- タイポスケール(ref-1 実測: h1 48/900, h2 32/700, h3 20/700) --- */
  --fs-hero: clamp(2rem, 1.2rem + 3.6vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  --fs-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1.0625rem;   /* 17px: ref-1 の20pxはSPで大きすぎ、ref-2/3の14pxは小さすぎるため中間 */
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;
  --fw-hero: 900;
  --fw-heading: 700;
  --lh-hero: 1.25;        /* ref-1 実測 1.2 に日本語の可読性分だけ余裕 */
  --lh-heading: 1.4;
  --lh-body: 1.8;

  /* --- 余白スケール --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;        /* ref-1 実測: 64px */
  --space-7: 5rem;        /* ref-1 実測: 80px(セクション上下) */
  --section-pad: 3.5rem;  /* SP。768px以上で --space-7 に切り替え(base.css) */

  /* --- 形状(ref-1 実測) --- */
  --radius-button: 8px;
  --radius-card: 16px;
  --radius-small: 8px;
  --radius-pill: 9999px;
  --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-cta: 0 4px 20px rgba(186, 26, 33, 0.3);
  --button-pad: 1.25rem 2.5rem;   /* ref-1 実測 24px 48px をSP幅に合わせ微縮 */
  --button-pad-lg: 1.5rem 3rem;   /* ref-1 実測そのまま(PC) */

  /* --- レイアウト --- */
  --container-max: 1160px;
  --container-narrow: 820px;
  --header-h: 64px;
  --sp-bar-h: 60px;

  /* --- ブレークポイント(メディアクエリ内で直接数値を使う) ---
     sm: 480px / md: 768px / lg: 1024px */
}

/* ダークモード: 面をスレート系に落とし、アクセント文字は明度を上げてAAを確保 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-base: #111827;
    --color-surface: #0b1220;
    --color-surface-raised: #1f2937;
    --color-border: #374151;
    --color-text: #f3f4f6;
    --color-text-muted: #d1d5db;
    --color-accent-text: #fca5a5;
    --color-highlight-soft: #3a3210;
    --color-marker: rgba(249, 224, 94, 0.35);
    --map-sea: #1a2532;
    --map-land: #2a3240;
    --map-boundary: #111827;
    --map-focus: #5c2a2e;
    --map-ward-line: #e0777c;
    --map-pref-line: #6b7280;
    --map-label: #f3f4f6;
    --map-halo: #111827;
    --map-pin: #f3f4f6;
    --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.4);
    --color-success: #6ee7b7;
    --color-error: #fca5a5;
  }
}