/* =====================================================================
   nizukuri-design デザイントークン v2（デジタル庁デザインシステム準拠）
   準拠元: デジタル庁デザインシステム（DADS）β版 v2.18.2 /
           @digital-go-jp/design-tokens 2.1.0（2026-10 時点、MIT）
           https://design.digital.go.jp/
   使い方: このファイルをアプリにコピーし、下の「テーマカラー設定」の
   3変数だけを apps.md（色の台帳）で選んだ色に書き換える。
   それ以外の値は編集しない（変更はこのリポジトリ側で行う）。

   密度は画面で自動切替する:
     comfortable … スマホ・タブレット・タッチ端末（現場向け。既定）
     dense       … 幅 1024px 以上かつマウス操作の PC（事務向け）
   強制したいときは <html data-density="comfortable|dense"> を付ける。
   ===================================================================== */

:root {
  /* ===== テーマカラー設定（アプリごとにここだけ書き換える） =====
     パレット（DADS カラースケールから選定 / apps.md で重複がないこと / 白文字 AA 確認済み）:
     藍 Blue        : #0017C1 / #00118F / #D9E6FF   (Blue 900/1000/100)
     青緑 Cyan      : #006F83 / #006173 / #C8F8FF   (Cyan 900/1000/100)
     空 Light Blue  : #0055AD / #00428C / #DCF0FF   (Light Blue 900/1000/100)
     緑 Green       : #197A4B / #115A36 / #C2E5D1   (Green 800/900/100)
     紫 Purple      : #5C10BE / #5109AD / #ECDDFF   (Purple 800/900/100)
     紅 Magenta     : #AA00AA / #8B008B / #FFD0FF   (Magenta 800/900/100)
     橙 Orange      : #AC3E00 / #8B3200 / #FFDFCA   (Orange 900/1000/100)
     鉄 Gray        : #4D4D4D / #1A1A1A / #CCCCCC   (Solid Gray 700/900/200)
     予備 黄緑 Lime : #507500 / #3E5A00 / #D0F5A2   (Lime 900/1000/100) */
  --theme: #507500;
  --theme-hover: #3E5A00;
  --theme-tint: #D0F5A2; /* 行 hover・選択行の淡い面。上に置く文字は --color-text のみ */

  /* ===== ニュートラル（DADS Solid Gray・全アプリ共通・変更禁止） ===== */
  --color-text: #333333;         /* Solid Gray 800 */
  --color-text-muted: #666666;   /* Solid Gray 600 */
  --color-border: #666666;       /* Solid Gray 600: 入力欄の枠線 */
  --color-border-light: #949494; /* Solid Gray 420: カード枠などの装飾的区切り */
  --color-table-border: #7F7F7F; /* Solid Gray 500: 表の罫線（灰の縞上でも 3:1） */
  --color-table-head: #E6E6E6;   /* Solid Gray 100: 表のヘッダー背景 */
  --color-bg: #F2F2F2;           /* Solid Gray 50 */
  --color-surface: #FFFFFF;

  /* ===== フォーカス（DADS 固定: 黒 + Yellow 300。変更禁止） ===== */
  --color-focus: #000000;
  --color-focus-ring: #FFD43D;

  /* ===== セマンティック（意味を持つ色・全アプリ共通・変更禁止） ===== */
  --color-error: #CE0000;        /* Red 900 */
  --color-error-bg: #FDEEEE;     /* Red 50 */
  --color-error-text: #CE0000;   /* Red 900 */
  --color-error-border: #FFBBBB; /* Red 200 */
  --color-success: #197A4B;        /* Green 800 */
  --color-success-bg: #E6F5EC;     /* Green 50 */
  --color-success-text: #115A36;   /* Green 900 */
  --color-success-border: #9BD4B5; /* Green 200 */
  --color-warning: #806300;        /* Yellow 1000 */
  --color-warning-bg: #FBF5E0;     /* Yellow 50 */
  --color-warning-text: #6E5600;   /* Yellow 1100 */
  --color-warning-border: #FFD43D; /* Yellow 300 */
  --color-info: #0066BE;        /* Light Blue 800（DADS に Info は無いため当社割当） */
  --color-info-bg: #F0F9FF;     /* Light Blue 50 */
  --color-info-text: #0055AD;   /* Light Blue 900 */
  --color-info-border: #C0E4FF; /* Light Blue 200 */

  /* ===== タイポグラフィ ===== */
  --font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-mono: "Noto Sans Mono", "BIZ UDGothic", monospace;
  --text-sm: 14px;   /* 最小サイズ。これ未満は禁止 */
  --text-base: 16px; /* 本文（DADS Std-16） */
  --text-lg: 18px;   /* 重要な本文・ラベル */
  --text-xl: 20px;   /* セクション見出し */
  --text-2xl: 24px;  /* ページタイトル */
  --line-height: 1.6;
  --line-height-table: 1.5;

  /* ===== サイズ・形状（comfortable） ===== */
  --input-height: 48px;   /* DADS md */
  --input-font: 16px;
  --button-height: 56px;  /* DADS lg */
  --button-font: 16px;
  --button-padding-x: 16px;
  --button-height-inline: 44px; /* 表の行内ボタン（タッチ端末ではタッチ最小 44px を守る） */
  --touch-min: 44px;
  --border-width: 1px;    /* DADS: 入力欄・副ボタンの枠は 1px */
  --radius: 8px;
  --radius-card: 12px;

  /* ===== レイアウト（comfortable） ===== */
  --content-max: 720px;
  --content-narrow: 720px; /* フォーム・ログインなど読み物系 */
  --content-padding: 16px;
  --card-padding: 24px;
  --field-gap: 24px;          /* フォーム項目どうしの間隔 */
  --field-columns: 1fr;       /* フォーム項目のグリッド列 */
  --field-label-gap: 8px;     /* ラベルと入力欄の間 */
  --field-message-column: 1;  /* エラー文・補足文を置く列 */
  --table-cell-y: 16px;
  --table-cell-x: 16px;
  --header-height: 56px;
  --logo-size: 36px;
  --section-gap: 48px;

  /* ===== 余白スケール（4px 刻み。この刻み以外を使わない） ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ===== dense（PC 事務向け）: 自動判定 ===== */
@media (min-width: 1024px) and (pointer: fine) {
  :root:not([data-density="comfortable"]) {
    --text-base: 14px;   /* DADS Dns-14 */
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --line-height: 1.4;
    --line-height-table: 1.3;
    --input-height: 36px;  /* DADS sm */
    --input-font: 14px;
    --button-height: 36px; /* DADS sm */
    --button-font: 14px;
    --button-padding-x: 12px;
    --button-height-inline: 28px; /* DADS xs */
    --radius: 6px;
    --radius-card: 8px;
    --content-max: 1280px;
    --content-padding: 24px;
    --card-padding: 16px;
    --field-gap: 12px;
    --field-columns: 10em 1fr;
    --field-label-gap: 0px;
    --field-message-column: 2;
    --table-cell-y: 8px;
    --table-cell-x: 12px;
    --header-height: 44px;
    --logo-size: 28px;
    --section-gap: 32px;
  }
}

/* ===== dense: 手動で強制（値は上と同じ。変更時は両方そろえる） ===== */
:root[data-density="dense"] {
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --line-height: 1.4;
  --line-height-table: 1.3;
  --input-height: 36px;
  --input-font: 14px;
  --button-height: 36px;
  --button-font: 14px;
  --button-padding-x: 12px;
  --button-height-inline: 28px;
  --radius: 6px;
  --radius-card: 8px;
  --content-max: 1280px;
  --content-padding: 24px;
  --card-padding: 16px;
  --field-gap: 12px;
  --field-columns: 10em 1fr;
  --field-label-gap: 0px;
  --field-message-column: 2;
  --table-cell-y: 8px;
  --table-cell-x: 12px;
  --header-height: 44px;
  --logo-size: 28px;
  --section-gap: 32px;
}

/* タッチ端末では入力欄の文字を常に 16px（iOS のフォーカス時自動ズーム防止） */
@media (pointer: coarse) {
  :root { --input-font: 16px; }
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
}

/* キーボード操作のフォーカス（DADS 固定: 黒 4px + 黄 2px の二重リング） */
:focus-visible {
  outline: 4px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* OS の「視覚効果を減らす」設定でアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}