/*
 * デザイントークン定義（色・スペーシング・角丸・シャドウ）
 * style.css / style_sp.css の :root より必ず先に読み込むこと。
 * 値は既存の style.css / style_sp.css の :root と完全一致させており、
 * このファイルを追加するだけでは見た目に一切変化が起きない。
 */
:root {
  /* ---- 色（機能色） ---- */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-secondary: #64748b;
  --color-secondary-hover: #475569;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-success: #10b981;
  --color-success-hover: #059669;

  /* ---- 色（アクセント / plans.html の緑を正式トークン化） ---- */
  --color-accent: #4caf50;
  --color-accent-hover: #45a049;
  --color-accent-soft: #e8f5e9;

  /* ---- 色（サーフェス・テキスト） ---- */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f5f9;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* ---- 色（ステータス） ---- */
  --color-warning: #e67e22;
  --color-warning-bg: #fff7ed;
  --color-info: #2196f3;
  --color-info-bg: #f0f8ff;

  /* ---- スペーシング（4pxグリッド + 既存の半端値を維持するハーフステップ） ---- */
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* ---- 角丸（style_sp.css の単一値 --radius を --radius-lg にエイリアス） ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius: var(--radius-lg);
  --radius-pill: 9999px;

  /* ---- シャドウ ---- */
  /* 値は style.css（PC側）の :root に合わせている。
     style_sp.css は自身の :root で --shadow-sm: 0 2px 4px rgba(0,0,0,0.06) を
     再定義しており、tokens.css より後に読み込まれるため今はSP側でその値が勝つ
     （見た目への影響なし）。Phase2で style_sp.css の :root を削除する際は、
     このSP側の実値を正として引き継ぐこと。 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  /* style_sp.css の元値をそのまま維持（意図的に --shadow-md とは統一しない。
     ヘッダー/カード等で使われており、視覚的な統一が必要になった時点で
     別途スクリーンショット確認の上、明示的に変更すること） */
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.08);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- 旧変数名エイリアス（style.css / style_sp.css の既存 var(--primary-color) 等を壊さないための移行措置） ---- */
  --primary-color: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --secondary-color: var(--color-secondary);
  --secondary-hover: var(--color-secondary-hover);
  --danger-color: var(--color-danger);
  --danger-hover: var(--color-danger-hover);
  --success-color: var(--color-success);
  --success-hover: var(--color-success-hover);
  --background-color: var(--color-bg);
  --surface-color: var(--color-surface);
  --text-main: var(--color-text);
  --text-muted: var(--color-text-muted);
  --border-color: var(--color-border);
  --company-color: var(--color-primary);
}