/* 下層ページ（トップ以外）の色。デザインシステム v0.2　系統：鮮やか（vivid）　メイン：緑　補助：桃
   トップは colors.css（REGION系統）のまま。2026-10-30 本人がヒーローのG4案（白地に緑と桃がにじむ）を選んだのに合わせて追加
   生成元：~/projects/design/デザインシステム.html（_仕組み/export_colors.mjs で書き出し）。値はここで直さず、デザインシステム側で選び直してコピーする */
:root {
  --paper: #FFFFFF;
  --surface: #F2F5F7;
  --ink: #22232B;
  --ink-2: #525252;
  --ink-3: #868686;
  --gray-50: #F7F7F7;
  --gray-100: #EEEEEE;
  --gray-200: #DEDEDE;
  --gray-300: #C4C4C4;
  --gray-500: #868686;
  --gray-700: #525252;
  --gray-900: #242424;
  --main-50: #EEFAF3;
  --main-100: #C1F8D6;
  --main-200: #94EEBB;
  --main-500: #45E499;
  --main-700: #32B97A;
  --main-900: #136F46;
  --main-text: #136F46;
  --accent-50: #FFF3F8;
  --accent-100: #FEC4DC;
  --accent-200: #FF8EC2;
  --accent-500: #FD3FA8;
  --accent-700: #C72581;
  --accent-900: #811853;
  --action: #22232B;
  --on-action: #FFFFFF;
  --action-hover: color-mix(in oklch, #22232B, #FFFFFF 18%);
  --paper-deep: #F0F3F5;
  --tint: #E1F9EA;
  --card: #FFFFFF;
  --card-tint: #E1F9EA;
  --card-strong: #136F46;
  --secondary: #EEEEEE;
  --secondary-hover: #DEDEDE;
  --link: #136F46;
  --link-hover: #22232B;
  --focus: #136F46;
  --mark: #C1F8D6;
  --dark: #22232B;
  --on-dark: #FFFFFF;
  --on-dark-2: #DEDEDE;
  --on-dark-3: #C4C4C4;
  --link-on-dark: #94EEBB;
  --on-main-500: #22232B;
  --grad-from: #45E499;
  --grad-to: #FD3FA8;
  --on-grad: #22232B;
  --error: #BE2323;
  --error-bg: #FFF2F0;
  --success: #137738;
  --success-bg: #EAFAEC;
  --warning: #8A5600;
  --warning-bg: #FFF4DE;
}