/* =============================================================
   建設業許可DB — デザイントークン
   /css/tokens.css
   Phase 0 / 2026-09-10
   全ページ共通。ここより先に読み込むCSSは reset.css のみ。
   ※ 色・余白・書体の値をハードコードせず、必ずこの変数を参照すること
   ============================================================= */

:root {
  /* --- ブランド ------------------------------------------- */
  --km-brand:        #123A5F;   /* ヘッダー・見出し・親ブランド */
  --km-brand-deep:   #0C2942;   /* ホバー・フッター */
  --km-brand-tint:   #E8EEF4;   /* 淡い面（見出し帯・選択中タブ） */

  --km-accent:       #0B6E99;   /* リンク・タブ・強調 */
  --km-accent-hover: #095875;
  --km-accent-tint:  #E6F1F6;

  --km-cta:          #C2410C;   /* 主要アクション（検索ボタン）専用 */
  --km-cta-hover:    #9A330A;

  /* --- ニュートラル ---------------------------------------- */
  --km-bg:           #F6F7F9;   /* ページ地色 */
  --km-surface:      #FFFFFF;   /* カード・テーブル面 */
  --km-surface-alt:  #FAFBFC;   /* テーブル縞・入れ子面 */
  --km-border:       #DFE3E8;
  --km-border-strong:#C4CBD3;
  --km-border-input: #6B7885;   /* 入力欄・選択欄の枠（白の上で 4.5:1・TC-760 2026-09-25） */
  --km-text:         #1B2530;   /* 本文 */
  --km-text-muted:   #5B6773;   /* 補助テキスト（4.5:1 確保済） */
  --km-text-invert:  #FFFFFF;

  /* --- 状態 ------------------------------------------------ */
  --km-active:       #1E7A46;   /* 許可あり */
  --km-active-tint:  #E7F3EC;
  --km-warn:         #9A6206;
  --km-warn-tint:    #FBF2E2;
  --km-danger:       #B3261E;
  --km-danger-tint:  #FBEAE9;
  --km-expired:      #6B7280;   /* 失効。赤ではなくグレー（危険ではなく非該当のため） */
  --km-expired-tint: #F1F2F4;

  /* --- タイポグラフィ -------------------------------------- */
  --km-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
             "游ゴシック Medium", "Meiryo", system-ui, sans-serif;
  --km-fs-xs:   0.8125rem;  /* 13px 最小。本文には使わない */
  --km-fs-sm:   0.875rem;   /* 14px */
  --km-fs-base: 1rem;       /* 16px 本文 */
  --km-fs-md:   1.0625rem;  /* 17px */
  --km-fs-lg:   1.25rem;    /* 20px */
  --km-fs-xl:   1.5rem;     /* 24px */
  --km-fs-2xl:  1.875rem;   /* 30px */
  --km-fs-3xl:  2.25rem;    /* 36px h1 */

  --km-lh-tight: 1.4;
  --km-lh-base:  1.8;
  --km-lh-list:  1.7;

  --km-fw-normal: 400;
  --km-fw-bold:   700;

  /* --- 余白（4px基準） ------------------------------------- */
  --km-sp-1:  4px;
  --km-sp-2:  8px;
  --km-sp-3:  12px;
  --km-sp-4:  16px;
  --km-sp-5:  24px;
  --km-sp-6:  32px;
  --km-sp-7:  48px;
  --km-sp-8:  64px;
  --km-sp-9:  96px;

  /* --- 角丸・影 -------------------------------------------- */
  --km-radius-sm: 6px;
  --km-radius:    10px;
  --km-radius-lg: 16px;
  --km-radius-pill: 999px;

  /* 影は2段階のみ。グラデーションと多段シャドウは使用禁止 */
  --km-shadow-1: 0 1px 2px rgba(18, 58, 95, 0.06),
                 0 1px 3px rgba(18, 58, 95, 0.08);
  --km-shadow-2: 0 4px 12px rgba(18, 58, 95, 0.10);
  /* 暗い背景の上に重ねる白の透過（トップの FV の枠・線・面。2026-09-15 design 回99・TC-715） */
  --km-on-dark-line:   rgba(255, 255, 255, 0.30);
  --km-on-dark-fill:   rgba(255, 255, 255, 0.12);
  --km-on-dark-border: rgba(255, 255, 255, 0.45); /* 2026-09-25 TC-761: 0.25→0.45（暗い地の上の枠は 0.35 以上） */

  /* --- レイアウト ------------------------------------------ */
  --km-container: 1120px;
  --km-container-narrow: 760px;
  --km-gutter: var(--km-sp-4);
  --km-header-h: 60px;

  /* --- インタラクション ------------------------------------ */
  --km-tap-min: 44px;         /* タップ領域の最小値。厳守 */
  --km-transition: 150ms ease;
  --km-focus: 0 0 0 2px var(--km-surface), 0 0 0 4px var(--km-accent);
}

/* 動きを抑制する設定の利用者にはアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  :root { --km-transition: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------
   基本タイポグラフィ
   ------------------------------------------------------------- */
body {
  font-family: var(--km-font);
  font-size: var(--km-fs-base);
  line-height: var(--km-lh-base);
  color: var(--km-text);
  background: var(--km-bg);
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  line-height: var(--km-lh-tight);
  color: var(--km-brand);
  font-weight: var(--km-fw-bold);
  margin: 0 0 var(--km-sp-4);
}
h1 { font-size: var(--km-fs-3xl); }
h2 { font-size: var(--km-fs-xl); }
h3 { font-size: var(--km-fs-lg); }

@media (max-width: 640px) {
  h1 { font-size: var(--km-fs-xl); }
  h2 { font-size: var(--km-fs-lg); }
}

a {
  color: var(--km-accent);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--km-accent-hover); }

/* キーボード操作時のフォーカスを必ず可視化（WCAG必達） */
:focus-visible {
  outline: none;
  box-shadow: var(--km-focus);
  border-radius: var(--km-radius-sm);
}

/* 画像は必ず親幅に収める（横スクロール防止） */
img { max-width: 100%; height: auto; }

/* -------------------------------------------------------------
   レイアウト土台
   ------------------------------------------------------------- */
.km-container {
  max-width: var(--km-container);
  margin-inline: auto;
  padding-inline: var(--km-gutter);
}
.km-container--narrow { max-width: var(--km-container-narrow); }

.km-stack > * + * { margin-top: var(--km-sp-4); }
.km-stack-lg > * + * { margin-top: var(--km-sp-6); }

/* スクリーンリーダー専用テキスト */
.km-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}