/* ══════════════════════════════════════════════════════════
   SakuFind — 配色と形（設計 5-14）
   **値は mockups/filter-mock.html と一字一句そろえてある。**
   ダークが既定値。ライトの実値は --l-* に1回だけ書き、
   2つの適用ブロックがそれを参照する。
   ══════════════════════════════════════════════════════════ */
:root{
  /* ── ダーク（既定値） ── */
  --ink:#0d0d0f; --ink-2:#141418; --ink-3:#1c1c22;
  --line:#2a2a33; --line-2:#3a3a46;
  --line-btn:#646470;                        /* 出口ボタンの枠。地に対して 3.3:1（5-12） */
  --fg:#f4f2ee; --fg-dim:#e4e1da; --fg-mute:#c0bcb4;
  /* 地に対して 17.4 / 14.9 / 10.3。--fg-mute は 10px の件数・注記が主用途なので
     4.5 ではなく 10:1 を満たす明るさにする（旧値 #9d9991 は 6.8 しかなかった） */
  --signal:#f0b429; --signal-dim:#a37d24;
  --signal-bg:#f0b429; --on-signal:#1a1204;
  --tint-1:rgba(240,180,41,.08); --tint-2:rgba(240,180,41,.12); --tint-3:rgba(240,180,41,.18);
  --live:#4ade80; --live-line:rgba(74,222,128,.35); --live-bg:rgba(74,222,128,.12);
  --sale:#ff5c5c; --sale-bg:rgba(255,92,92,.10); --on-sale:#fff;
  /* 選択済み（チップ・適用中トークン）。ダークは塗りつぶして黒文字＝タブと同じ扱いにする */
  --sel-bg:#f0b429; --sel-line:#f0b429; --on-sel:#1a1204;
  --sel-sub:rgba(26,18,4,.7);                /* 琥珀の上で 5.0:1。件数は10pxなので落とし過ぎない */
  --sel-hover:rgba(0,0,0,.16);
  --tok-bg:#f0b429; --tok-line:#f0b429;
  --veil:rgba(13,13,15,.86);                 /* 追従するヘッダー等 */
  --veil-solid:rgba(13,13,15,.97);           /* ゲート・検索の全面 */
  --hair:rgba(42,42,51,.5);                  /* 検索候補の区切り。--line より薄い */
  --shadow:0 8px 28px rgba(0,0,0,.7);
  /* 棚の端。ダークは地に溶かす */
  --fade-a:#0d0d0f; --fade-b:rgba(13,13,15,0); --fade-w:38px;
  --shadow-fab:0 14px 34px rgba(0,0,0,.55),0 3px 10px rgba(0,0,0,.4);
  --shadow-fab-lg:0 14px 34px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.3);
  --shadow-fab-lg-h:0 18px 44px rgba(0,0,0,.52),0 5px 14px rgba(0,0,0,.34);
  --shadow-thumb:0 1px 6px rgba(0,0,0,.7);

  /* ── ライトの実値。ここだけが唯一の出どころ ──
     地は純白、差し色は臙脂（えんじ）。和の色で明朝の索引という佇まいに寄せる */
  --l-ink:#ffffff; --l-ink-2:#f5f5f4; --l-ink-3:#ebebe9;
  --l-line:#e3e3e0; --l-line-2:#c8c8c3; --l-line-btn:#8f8f8b;
  --l-fg:#17171a; --l-fg-dim:#54545a; --l-fg-mute:#65656b;
  --l-signal:#9c1c46; --l-signal-dim:#8e4a60;
  --l-signal-bg:#a81f4c; --l-on-signal:#ffffff;
  --l-tint-1:rgba(156,28,70,.06); --l-tint-2:rgba(156,28,70,.10); --l-tint-3:rgba(156,28,70,.16);
  --l-live:#1f7a3d; --l-live-line:rgba(31,122,61,.4); --l-live-bg:rgba(31,122,61,.09);
  --l-sale:#c2410c; --l-sale-bg:rgba(194,65,12,.08); --l-on-sale:#fff;
  /* 選択済み。ライトも塗りつぶす。塗りは --signal-bg（タブ・CTA と同じ色）で白文字 */
  --l-sel-bg:#a81f4c; --l-sel-line:#a81f4c; --l-on-sel:#ffffff;
  --l-sel-sub:rgba(255,255,255,.8);          /* 臙脂の上で 5.0:1。ダークの件数と同じ読みやすさ */
  --l-sel-hover:rgba(255,255,255,.22);
  --l-tok-bg:#a81f4c; --l-tok-line:#a81f4c;
  --l-veil:rgba(255,255,255,.9); --l-veil-solid:rgba(255,255,255,.98);
  --l-hair:rgba(0,0,0,.06);
  --l-shadow:0 8px 28px rgba(0,0,0,.16);
  /* 棚の端。白地では白のフェードが効かないので、影として置く */
  --l-fade-a:rgba(0,0,0,.07); --l-fade-b:rgba(0,0,0,0); --l-fade-w:26px;
  --l-shadow-fab:0 10px 26px rgba(156,28,70,.24),0 2px 8px rgba(0,0,0,.10);
  --l-shadow-fab-lg:0 12px 30px rgba(156,28,70,.26),0 3px 10px rgba(0,0,0,.10);
  --l-shadow-fab-lg-h:0 16px 38px rgba(156,28,70,.32),0 4px 12px rgba(0,0,0,.12);
  --l-shadow-thumb:0 1px 4px rgba(0,0,0,.22);

  /* ── テーマに追従させない色（5-14④）。必ず写真の上に乗るため ──
     値はモックの .card__badge / .fl と同じ */
  --fixed-badge-bg:#0d0d0f; --fixed-on-badge:#e8e6e1;
  --fixed-live:#4ade80; --fixed-hiatus:#f0b429; --fixed-retired:#8f8b83;
  --fixed-vr-bg:#f0b429; --fixed-on-vr:#1a1204;
  --fixed-sale:#e04141; --fixed-on-sale:#ffffff;
  --fixed-fav:#ff5c5c;
  --fixed-scrim:rgba(0,0,0,.62);
  --fixed-thumb-veil:rgba(13,13,15,.6); --fixed-thumb-veil-h:rgba(13,13,15,.85);

  /* ── 形で役割を分ける（5-14） ── */
  --r-exec:999px;   /* 実行するボタン。実行色の塗りと必ずセットにする */
  --r-data:2px;     /* チップ・入力欄・カード・タブ・レール */

  --font-sans:"Zen Kaku Gothic New",system-ui,sans-serif;
  --font-serif:"Zen Old Mincho",serif;
  --font-num:"DM Mono",ui-monospace,monospace;
  --rail-w:296px; --grid-gap:2px; --sheet-h:min(86dvh,780px);
  color-scheme:dark;
}

:root[data-theme="light"]{
  --ink:var(--l-ink); --ink-2:var(--l-ink-2); --ink-3:var(--l-ink-3);
  --line:var(--l-line); --line-2:var(--l-line-2); --line-btn:var(--l-line-btn);
  --fg:var(--l-fg); --fg-dim:var(--l-fg-dim); --fg-mute:var(--l-fg-mute);
  --signal:var(--l-signal); --signal-dim:var(--l-signal-dim);
  --signal-bg:var(--l-signal-bg); --on-signal:var(--l-on-signal);
  --tint-1:var(--l-tint-1); --tint-2:var(--l-tint-2); --tint-3:var(--l-tint-3);
  --live:var(--l-live); --live-line:var(--l-live-line); --live-bg:var(--l-live-bg);
  --sale:var(--l-sale); --sale-bg:var(--l-sale-bg); --on-sale:var(--l-on-sale);
  --sel-bg:var(--l-sel-bg); --sel-line:var(--l-sel-line); --on-sel:var(--l-on-sel);
  --sel-sub:var(--l-sel-sub); --sel-hover:var(--l-sel-hover);
  --tok-bg:var(--l-tok-bg); --tok-line:var(--l-tok-line);
  --veil:var(--l-veil); --veil-solid:var(--l-veil-solid); --hair:var(--l-hair);
  --shadow:var(--l-shadow);
  --fade-a:var(--l-fade-a); --fade-b:var(--l-fade-b); --fade-w:var(--l-fade-w);
  --shadow-fab:var(--l-shadow-fab); --shadow-fab-lg:var(--l-shadow-fab-lg);
  --shadow-fab-lg-h:var(--l-shadow-fab-lg-h); --shadow-thumb:var(--l-shadow-thumb);
  color-scheme:light;
}

/* JS が動かない環境の保険（5-14）。値は上と同じ --l-* を参照する */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:var(--l-ink); --ink-2:var(--l-ink-2); --ink-3:var(--l-ink-3);
    --line:var(--l-line); --line-2:var(--l-line-2); --line-btn:var(--l-line-btn);
    --fg:var(--l-fg); --fg-dim:var(--l-fg-dim); --fg-mute:var(--l-fg-mute);
    --signal:var(--l-signal); --signal-dim:var(--l-signal-dim);
    --signal-bg:var(--l-signal-bg); --on-signal:var(--l-on-signal);
    --tint-1:var(--l-tint-1); --tint-2:var(--l-tint-2); --tint-3:var(--l-tint-3);
    --live:var(--l-live); --live-line:var(--l-live-line); --live-bg:var(--l-live-bg);
    --sale:var(--l-sale); --sale-bg:var(--l-sale-bg); --on-sale:var(--l-on-sale);
    --sel-bg:var(--l-sel-bg); --sel-line:var(--l-sel-line); --on-sel:var(--l-on-sel);
    --sel-sub:var(--l-sel-sub); --sel-hover:var(--l-sel-hover);
    --tok-bg:var(--l-tok-bg); --tok-line:var(--l-tok-line);
    --veil:var(--l-veil); --veil-solid:var(--l-veil-solid); --hair:var(--l-hair);
    --shadow:var(--l-shadow);
    --fade-a:var(--l-fade-a); --fade-b:var(--l-fade-b); --fade-w:var(--l-fade-w);
    --shadow-fab:var(--l-shadow-fab); --shadow-fab-lg:var(--l-shadow-fab-lg);
    --shadow-fab-lg-h:var(--l-shadow-fab-lg-h); --shadow-thumb:var(--l-shadow-thumb);
    color-scheme:light;
  }
}

/* ══════════════════════════════════════════════════════════
   動き。**モックの @keyframes をそのまま持ってきている。**
   ══════════════════════════════════════════════════════════ */
@keyframes tokIn{from{opacity:0;transform:translateY(-3px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sheetIn{from{transform:translateY(101%)}to{transform:none}}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes heartBeat{
  0%,100%{transform:scale(1)} 28%{transform:scale(1.2)}
  44%{transform:scale(1)}     60%{transform:scale(1.12)}
}