/* =========================================================
   vfp-button.dark.css  (FULL / 枠線ナシのトーナル＋ベゼル質感)
   2025-11-09

   // 要点
   // 1) 枠線はやめ、トップのソフトハイライト＋ボトムの落ち影で立体感を作る。
   // 2) テーマ色は hue 不変。oklab の color-mix で明度のみ調整。
   // 3) Hover/Active は明度差を控えめに（白飛び防止）。
   // 4) Focus-visible は外側リングで可視性確保（キーボード対応）。
========================================================= */

/* ---------- Scope: dark only ---------- */
:root[data-theme="dark"]{
  --vbtn-base: var(--theme-waterblue); /* 既存トークンを利用（色相は不変） */

  /* トーナル（暗部ブレンド） */
  --vbtn-tonal: color-mix(in oklab, var(--vbtn-base), black 16%);      /* 通常 */
  --vbtn-tonal-hover: color-mix(in oklab, var(--vbtn-base), black 10%);/* Hover */
  --vbtn-tonal-active: color-mix(in oklab, var(--vbtn-base), black 22%);/* Active */

  /* ベゼル用の微ハイライト / 微シャドウ（質感） */
  --vbtn-bezel-top: color-mix(in oklab, var(--vbtn-base), white 15%);
  --vbtn-bezel-btm: color-mix(in oklab, var(--vbtn-base), black 14%);

  /* インク（白すぎない） */
  --vbtn-ink: #e6faff;

  /* 影は控えめ（広がり小） */
  --vbtn-shadow-ambient: 0 6px 14px rgba(0,0,0,.24);

  /* フォーカスリング（外側二重） */
  --vbtn-focus-outer: color-mix(in oklab, var(--vbtn-base), white 18%);
  --vbtn-focus-inner: rgba(0,0,0,.55);
}

/* ---------- CTA / Main Buttons ---------- */
.vfp-btn{
  --_bg: var(--vbtn-tonal);
  --_ink: var(--vbtn-ink);

  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  min-height:40px; padding:.62rem 1.1rem;
  border-radius:18px;

  /* 枠線は使わず、レイヤード背景で質感を作る */
  background:
    /* トップのソフトハイライト（2層・極薄） */
    linear-gradient(180deg, color-mix(in oklab, var(--vbtn-bezel-top), transparent 88%) 0%, transparent 48%),
    /* ボトムの溜まり影（極薄） */
    linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--vbtn-bezel-btm), transparent 85%) 100%),
    /* ベース色 */
    linear-gradient(180deg, var(--_bg), var(--_bg));

  color: var(--_ink);
  border: none; /* ← 輪郭線は廃止 */
  box-shadow:
    /* 内側の僅かな縁取り（にじむ1pxで“面の厚み”を出す） */
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.18),
    /* 外側の環境影（弱） */
    var(--vbtn-shadow-ambient);

  text-decoration:none;
  font-weight:600;
  letter-spacing:.02em;
  transition:
    background-color .18s ease,
    transform .06s ease,
    box-shadow .18s ease, filter .18s ease;
}

/* Hover：明度差は +6% 程度、質感レイヤーを少しだけ強める */
.vfp-btn:hover{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--vbtn-bezel-top), transparent 84%) 0%, transparent 52%),
    linear-gradient(180deg, transparent 58%, color-mix(in oklab, var(--vbtn-bezel-btm), transparent 80%) 100%),
    linear-gradient(180deg, var(--vbtn-tonal-hover), var(--vbtn-tonal-hover));
}

/* Active：押し込み感（色を暗くし過ぎない／内側影をわずか強く） */
.vfp-btn:active{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--vbtn-bezel-top), transparent 90%) 0%, transparent 46%),
    linear-gradient(180deg, transparent 56%, color-mix(in oklab, var(--vbtn-bezel-btm), transparent 72%) 100%),
    linear-gradient(180deg, var(--vbtn-tonal-active), var(--vbtn-tonal-active));
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 4px 10px rgba(0,0,0,.22);
}

/* Focus Visible：外側リング（眩しくない二重リング） */
.vfp-btn:focus-visible{
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 2px var(--vbtn-focus-inner),
    0 0 0 4px var(--vbtn-focus-outer);
}

/* Disabled：彩度とコントラストを落とす */
.vfp-btn[disabled],
.vfp-btn.is-disabled{
  opacity:.55; cursor:not-allowed;
  filter:saturate(.75) brightness(.92);
}

/* ---------- Icon Buttons (header’s .btn-icon 等) ---------- */
/* 小面積なのでさらに枠線ゼロ／グレア控えめ */
.btn-icon{
  --_base: color-mix(in oklab, var(--vbtn-base), black 82%);
  --_ink:  color-mix(in oklab, var(--vbtn-base), white 32%);

  display:inline-grid; place-items:center;
  width:42px; height:42px;
  border-radius:14px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--_base), white 6%) 0%, transparent 40%),
    linear-gradient(180deg, var(--_base), var(--_base));
  color: var(--_ink);
  border:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.20);
  transition: background-color .18s ease, color .18s ease, transform .06s ease, box-shadow .18s ease;
}
.btn-icon:hover{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--_base), white 8%) 0%, transparent 44%),
    linear-gradient(180deg, color-mix(in oklab, var(--_base), white 4%), color-mix(in oklab, var(--_base), white 4%));
  color: color-mix(in oklab, var(--vbtn-base), white 40%);
}
.btn-icon:active{ transform: translateY(1px); }
.btn-icon:focus-visible{
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 0 2px var(--vbtn-focus-inner),
    0 0 0 4px var(--vbtn-focus-outer);
}

/* ---------- Lang Pill ---------- */
.lang-pill{
  --_base: color-mix(in oklab, var(--vbtn-base), black 86%);
  --_ink:  color-mix(in oklab, var(--vbtn-base), white 28%);

  display:inline-flex; align-items:center; gap:.5rem;
  height:34px; padding:0 .6rem;
  border-radius:999px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--_base), white 5%) 0%, transparent 38%),
    linear-gradient(180deg, var(--_base), var(--_base));
  color:var(--_ink);
  border:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
.lang-pill [data-lang]{opacity:.7; font-weight:600}
.lang-pill [data-lang].is-active{opacity:1; color:color-mix(in oklab, var(--vbtn-base), white 42%)}

/* ---------- Ghost / Outline Variants（必要なときだけ） ---------- */
.vfp-btn.is-ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 40%), transparent;
  color: color-mix(in oklab, var(--vbtn-base), white 24%);
  border: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--vbtn-base), black 55%); /* 疑似アウトラインは内側へ */
}
.vfp-btn.is-ghost:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 44%), rgba(255,255,255,.02);
}

.vfp-btn.is-outline{
  background: transparent; color: var(--vbtn-ink);
  border: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--vbtn-base), white 12%);
}
.vfp-btn.is-outline:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 50%);
}

/* ---------- Compact Buttons in cards/nav ---------- */
.card .vfp-btn, .nav-drawer a.vfp-btn{
  min-height:36px; padding:.5rem .9rem; border-radius:14px;
}

/* ---------- High-Contrast users ---------- */
@media (prefers-contrast: more){
  :root[data-theme="dark"]{
    --vbtn-focus-outer: color-mix(in oklab, var(--vbtn-base), white 28%);
  }
}