/* ==========================================================================
   美容比較サイト — 色の土台
   --------------------------------------------------------------------------
   生成: node tools/palette.mjs "#3A5A78"
   生成日: 2026-09-09

   OKLCH で計算し、本文 7:1 / 副文・主色 4.5:1 / 面の分離 3:1 を
   満たすところまで明度を逆算している。
   ここを手で書き換えると保証が外れる。色を変えたいときは主色を変えて再生成する。

   使い分け:
     --abi-accent      面として塗る（ボタンの地・帯）
     --abi-on-accent   その面の上に置く字
     --abi-accent-ink  地の上に字・リンクとして置く主色
   ========================================================================== */

:root {
  --abi-bg:         #eef3f8;
  --abi-surface:    #fcfeff;
  --abi-sunk:       #dfe6ee;
  --abi-line:       #c8d2db;
  --abi-line-soft:  #dae1e7;

  --abi-ink:        #484f57;
  --abi-ink-soft:   #595f66;
  --abi-mute:       #5e646a;

  --abi-accent:     #3a5a78;
  --abi-on-accent:  #ffffff;
  --abi-accent-ink: #466785;

  --abi-alert:      #bd413f;
  --abi-on-alert:   #ffffff;
  --abi-alert-ink:  #ac3031;

  --abi-focus:      var(--abi-accent-ink);
  --abi-bg-dark:    #090d11;
}

/* 暗い面。既定（system）と明示指定の両方で効かせる */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --abi-bg:         #090d11;
    --abi-surface:    #13191e;
    --abi-sunk:       #040608;
    --abi-line:       #2a3138;
    --abi-line-soft:  #1e2329;

    --abi-ink:        #99a0a6;
    --abi-ink-soft:   #878d92;
    --abi-mute:       #787e83;

    --abi-accent:     #41617f;
    --abi-on-accent:  #ffffff;
    --abi-accent-ink: #5f81a0;

    --abi-alert:      #bd413f;
    --abi-on-alert:   #ffffff;
    --abi-alert-ink:  #d1544f;
  }
}

:root[data-theme="dark"] {
  --abi-bg:         #090d11;
  --abi-surface:    #13191e;
  --abi-sunk:       #040608;
  --abi-line:       #2a3138;
  --abi-line-soft:  #1e2329;

  --abi-ink:        #99a0a6;
  --abi-ink-soft:   #878d92;
  --abi-mute:       #787e83;

  --abi-accent:     #41617f;
  --abi-on-accent:  #ffffff;
  --abi-accent-ink: #5f81a0;

  --abi-alert:      #bd413f;
  --abi-on-alert:   #ffffff;
  --abi-alert-ink:  #d1544f;
}