/* デザイントークン: 配色・余白・タイポグラフィの単一情報源 */
:root {
  /* 基本色 */
  --c-bg: #fbfaf7;
  --c-surface: #ffffff;
  --c-surface-alt: #f2f0ea;
  --c-border: #d8d4c8;
  --c-text: #26241f;
  --c-text-sub: #5c584e;
  --c-link: #1a56a8;
  --c-accent: #2b4ea2;
  --c-accent-strong: #1d3a7e;
  --c-accent-soft: #e3eaf8;
  --c-danger: #b3261e;
  --c-success: #2e6b34;
  --c-warn: #8a5a00;

  /* コード機能色(色+T/SD/D記号を必ず併記する。色単独で意味を伝えない) */
  --fn-t: #1f6f43;      /* トニック T */
  --fn-t-soft: #e0f0e5;
  --fn-sd: #9a6200;     /* サブドミナント SD */
  --fn-sd-soft: #f7ecd4;
  --fn-d: #a83232;      /* ドミナント D */
  --fn-d-soft: #f8e3e0;
  --fn-other: #5c584e;
  --fn-other-soft: #edebe4;

  /* 音の役割(鍵盤ハイライト等) */
  --role-root: #2b4ea2;
  --role-3rd: #9a3d86;
  --role-5th: #1f6f43;
  --role-7th: #a83232;
  --role-tension: #8a5a00;
  --role-scale: #7c88b8;
  --role-plain: #b9b4a5;

  /* 再生ハイライト */
  --c-playing: #ffd54d;
  --c-playing-border: #b98a00;

  /* 寸法 */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --header-h: 56px;
  --content-w: 880px;

  /* タイポグラフィ */
  --font-body: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Menlo", monospace;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: 1.2rem;
  --fs-xl: 1.5rem;
  --fs-xxl: 1.9rem;

  --shadow-1: 0 1px 3px rgba(40, 36, 25, 0.12);
  --shadow-2: 0 3px 10px rgba(40, 36, 25, 0.14);
}