/**
 * 01-variables.css — デザイントークン（色・余白・角丸・影・文字）
 * 正本＝sales-payroll-manager:css/variables.css（2026-10-24 に写した）。値は 1 字も変えていない。
 *   写さなかったもの：--bg-row-alt・--dt-*（sales の台帳と明細集計の画面専用）。
 *   足したもの：--font-*・--line-body（文字）、--line-w（罫線の太さ）、--reading-max（閲覧の本文の幅）。sales は各 CSS に直書き＝このアプリは最初からトークン。
 * ★色・寸法はここが唯一の真実。JS・HTML・他の CSS に直書きしない（ARCHITECTURE.md §見た目）。
 */

:root {
  /* --- 背景 --- */
  --bg-base: #0D0D12;       /* アプリ最下層 */
  --bg-surface: #16161D;    /* カード・パネル */
  --bg-surface-2: #1E1E27;  /* 一段上のパネル・入力欄 */
  --bg-elevated: #24242F;   /* モーダル・ポップ */

  /* --- 文字 --- */
  --text-primary: #F2F4F5;
  --text-secondary: #A9B0B8;
  --text-tertiary: #6B7280;
  --text-on-accent: #05130D;
  --text-on-danger: #FFFFFF;

  /* --- アクセント --- */
  --accent: #34D399;
  --accent-strong: #10B981;
  --accent-dim: rgba(52, 211, 153, 0.14);

  /* --- 状態色 --- */
  --danger: #FF4D4F;
  --danger-dim: rgba(255, 77, 79, 0.06);
  --warning: #FBBF24;
  --warning-dim: rgba(251, 191, 36, 0.12);
  --info: #60A5FA;

  /* --- 罫線 --- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --line-w: 1px;  /* 罫線の太さ（このアプリで足した） */

  /* --- 余白（4px グリッド） --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  /* --- 角丸 --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- 影 --- */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* --- 文字の大きさ（このアプリで足した） --- */
  --font-sm: 13px;
  --font-md: 16px;   /* 本文。iPhone で入力欄が拡大されない下限 */
  --font-lg: 18px;
  --font-xl: 22px;
  --line-body: 1.7;  /* 手順の本文は詰めない（店で立ったまま読む） */

  /* --- レイアウト --- */
  --header-h: 56px;
  --content-max: 960px;
  --reading-max: 640px;  /* 閲覧の本文の幅（スマホ幅のプレビューもこの幅） */
}

/* ライトモード（<html data-theme="light">）＝色トークンだけを上書き（正本と同じ値） */
:root[data-theme="light"] {
  --bg-base: #EEF0F3;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F4F6F8;
  --bg-elevated: #FFFFFF;

  --text-primary: #16191D;
  --text-secondary: #4B5563;
  --text-tertiary: #8A94A0;
  --text-on-accent: #FFFFFF;
  --text-on-danger: #FFFFFF;

  --accent: #059669;
  --accent-strong: #047857;
  --accent-dim: rgba(5, 150, 105, 0.12);

  --danger: #DC2626;
  --danger-dim: rgba(220, 38, 38, 0.05);
  --warning: #B45309;
  --warning-dim: rgba(180, 83, 9, 0.10);
  --info: #2563EB;

  --border-subtle: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.16);
}