/* =====================================================================
   nizukuri-design デザイントークン v1
   使い方: このファイルをアプリにコピーし、下の「テーマカラー設定」の
   3変数だけを apps.md（色の台帳）で選んだ色に書き換える。
   それ以外の値は編集しない（変更はこのリポジトリ側で行う）。
   ===================================================================== */

:root {
  /* ===== テーマカラー設定（アプリごとにここだけ書き換える） =====
     パレット（apps.md で重複がないこと / 白文字 AA 確認済み）:
     藍 Blue    : #1D4ED8 / #1E40AF / #EFF6FF
     青緑 Cyan  : #0E7490 / #155E75 / #ECFEFF
     緑青 Teal  : #0F766E / #115E59 / #F0FDFA
     緑 Green   : #15803D / #166534 / #F0FDF4
     紫 Purple  : #6D28D9 / #5B21B6 / #F5F3FF
     紅 Rose    : #BE123C / #9F1239 / #FFF1F2
     橙 Orange  : #C2410C / #9A3412 / #FFF7ED
     鉄紺 Slate : #334155 / #1E293B / #F8FAFC */
  --theme: #334155;
  --theme-hover: #1E293B;
  --theme-tint: #F8FAFC;

  /* ===== ニュートラル（全アプリ共通・変更禁止） ===== */
  --color-text: #1F2937;
  --color-text-muted: #6B7280;
  --color-border: #9CA3AF;
  --color-border-light: #E5E7EB;
  --color-bg: #F9FAFB;
  --color-surface: #FFFFFF;

  /* ===== セマンティック（意味を持つ色・全アプリ共通・変更禁止） ===== */
  --color-error: #DC2626;
  --color-error-bg: #FEF2F2;
  --color-error-text: #991B1B;
  --color-error-border: #FECACA;
  --color-success: #15803D;
  --color-success-bg: #F0FDF4;
  --color-success-text: #166534;
  --color-success-border: #BBF7D0;
  --color-warning: #B45309;
  --color-warning-bg: #FFFBEB;
  --color-warning-text: #854D0E;
  --color-warning-border: #FDE68A;
  --color-info: #2563EB;
  --color-info-bg: #EFF6FF;
  --color-info-text: #1E40AF;
  --color-info-border: #BFDBFE;

  /* ===== タイポグラフィ ===== */
  --font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --text-sm: 14px;   /* 最小サイズ。これ未満は禁止 */
  --text-base: 16px; /* 基本 */
  --text-lg: 18px;   /* 入力欄・重要な本文 */
  --text-xl: 20px;   /* セクション見出し */
  --text-2xl: 24px;  /* ページタイトル */
  --line-height: 1.6;

  /* ===== サイズ・形状 ===== */
  --input-height: 48px;
  --button-height: 52px;
  --touch-min: 44px;
  --border-width: 2px;
  --radius: 8px;
  --radius-card: 12px;

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

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);
}

/* キーボード操作のフォーカスを常に可視化 */
:focus-visible {
  outline: 3px solid var(--theme);
  outline-offset: 2px;
}

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