/* ========================================================================
   VFPrep Buttons - Light Theme Overrides
   File: VFP/asset/styles/vfp-button.light.css
   Scope: [data-theme="light"] .vfp-btn / .btn-icon / .lang-pill
   Depends on: vfp-button.dark.css (構造・サイズ・レイアウトはそちらが唯一の本体)
   ------------------------------------------------------------------------
   // 要点 / Key Points
   // 1) Light時の見た目“だけ”を上書き（色・影・リング）。構造・パディングは触らない。
   // 2) 輪郭線は出さず、柔らかいベゼル感とフォーカスリングで可読性を確保。
   // 3) .lang-pill は「未選択=控えめのグレー / 選択=アクセント寄り」で明瞭化。
   // 4) 高コントラスト（forced-colors）環境ではOS規定に従い簡素化。
   // 5) すべてのテキストはUI側で日英切替。CSSはローカライズ文言を持たない。
   ======================================================================== */

:root[data-theme="light"]{
  color-scheme: light;

  /* Base tokens for light buttons */
  --btn-surface: #ffffff;            /* base surface */
  --btn-surface-2: #f2f4f7;          /* hover layer */
  --btn-ink: #1c2128;                /* primary ink */
  --btn-ink-weak: #3a4047;           /* subdued ink */

  /* Shadows and effects (light taste, no hard borders) */
  --btn-shadow-2: inset 0 1px 0 rgba(255,255,255,.85),
                   0 1px 1px rgba(0,0,0,.06),
                   0 8px 24px -14px rgba(0,0,0,.18);
  --btn-press: inset 0 1px 2px rgba(0,0,0,.12),
               0 2px 4px rgba(0,0,0,.06);

  /* Focus ring (accent-tinted, light-friendly) */
  --btn-ring: 0 0 0 3px color-mix(in oklab, var(--accent), white 75%);
}

/* ===== Primary buttons (共通) ========================================== */
:root[data-theme="light"] .vfp-btn{
  background: var(--btn-surface);
  color: var(--btn-ink);
  border: none;
  box-shadow: var(--btn-shadow-2);
  transition:
    transform .08s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    filter .12s ease;
}

:root[data-theme="light"] .vfp-btn:hover{
  /* “色反転”させず、ベース色を保ったままグローだけ足す */
  background: var(--btn-surface);
  box-shadow:
    var(--btn-shadow-2),
    0 0 0 1px color-mix(in oklab, var(--accent), white 70%),
    0 0 18px color-mix(in oklab, var(--accent), transparent 55%);
  filter: brightness(1.01);
}

:root[data-theme="light"] .vfp-btn:active{
  transform: translateY(1px);
  box-shadow: var(--btn-press);
  filter: none;
}

:root[data-theme="light"] .vfp-btn:focus-visible{
  outline: none;
  box-shadow: var(--btn-shadow-2), var(--btn-ring);
}

:root[data-theme="light"] .vfp-btn[aria-disabled="true"],
:root[data-theme="light"] .vfp-btn:disabled{
  opacity: .55;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 0 0 1px rgba(0,0,0,.06);
}

/* ------------------------------------------------------------------------
   Modules メインボタン専用（M1〜M3 “一番上のボタン”）
   ------------------------------------------------------------------------
   // 1) アクセント塗り＋白文字を維持（ダークと同じ“主ボタン”の役割）。
   // 2) Hover時も色を反転させず、外側グローだけ強くする。
   // 3) ghost には一切影響させない（.vfp-btn.ghost は別セクションで定義）。
------------------------------------------------------------------------- */

:root[data-theme="light"] .actions.single .btns .vfp-btn:not(.ghost){
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--accent), white 12%) 0%,
      color-mix(in oklab, var(--accent), black 4%) 100%
    );
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}

:root[data-theme="light"] .actions.single .btns .vfp-btn:not(.ghost):hover{
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--accent), white 6%) 0%,
      color-mix(in oklab, var(--accent), black 6%) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 18px rgba(15,23,42,.22),
    0 0 0 1px color-mix(in oklab, var(--accent), white 65%),
    0 0 22px color-mix(in oklab, var(--accent), transparent 40%);
  transform: translateY(-0.5px);
  filter: none; /* 明度はグラデ側で調整 */
}

/* ===== Ghost buttons (secondary CTAs) ---------------------------------- */
/* 基本のゴーストボタン */
:root[data-theme="light"] .vfp-btn.ghost{
  background: #f2f4f7;
  color: var(--btn-ink-weak);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,23,42,.08);
}

:root[data-theme="light"] .vfp-btn.ghost:hover{
  background: #e3e7ef;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(15,23,42,.16),
    0 0 0 1px color-mix(in oklab, var(--accent), white 70%),
    0 0 16px color-mix(in oklab, var(--accent), transparent 60%);
}

:root[data-theme="light"] .vfp-btn.ghost:active{
  transform: translateY(1px);
  box-shadow: var(--btn-press);
}

/* Hero / Modules 内のゴーストボタンを確実に上書き */
:root[data-theme="light"] .hero-copy .vfp-btn.ghost,
:root[data-theme="light"] .actions.single .vfp-btn.ghost{
  background: #f2f4f7;
  color: var(--btn-ink-weak);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,23,42,.08);
}

:root[data-theme="light"] .hero-copy .vfp-btn.ghost:hover,
:root[data-theme="light"] .actions.single .vfp-btn.ghost:hover{
  background: #e3e7ef;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(15,23,42,.16),
    0 0 0 1px color-mix(in oklab, var(--accent), white 70%),
    0 0 16px color-mix(in oklab, var(--accent), transparent 60%);
}

:root[data-theme="light"] .hero-copy .vfp-btn.ghost:active,
:root[data-theme="light"] .actions.single .vfp-btn.ghost:active{
  transform: translateY(1px);
  box-shadow: var(--btn-press);
}

/* ===== Icon-only buttons =============================================== */
:root[data-theme="light"] .btn-icon{
  background: var(--btn-surface);
  color: var(--btn-ink);
  border: none;
  box-shadow: var(--btn-shadow-2);
}

:root[data-theme="light"] .btn-icon:hover{
  background: var(--btn-surface-2);
  box-shadow:
    var(--btn-shadow-2),
    0 0 0 1px color-mix(in oklab, var(--accent), white 70%),
    0 0 14px color-mix(in oklab, var(--accent), transparent 60%);
}

:root[data-theme="light"] .btn-icon:active{
  transform: translateY(1px);
  box-shadow: var(--btn-press);
}

:root[data-theme="light"] .btn-icon:focus-visible{
  outline: none;
  box-shadow: var(--btn-shadow-2), var(--btn-ring);
}

/* ===== Language pills =================================================== */
:root[data-theme="light"] .lang-pill{
  background: #f2f4f7;
  color: var(--btn-ink-weak);
  border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 1px rgba(0,0,0,.05);
}

:root[data-theme="light"] .lang-pill:hover{
  background: #e9edf2;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 1px rgba(0,0,0,.05),
    0 0 0 1px color-mix(in oklab, var(--accent), white 72%),
    0 0 12px color-mix(in oklab, var(--accent), transparent 62%);
}

:root[data-theme="light"] .lang-pill.is-active,
:root[data-theme="light"] .lang-pill[aria-pressed="true"],
:root[data-theme="light"] .lang-pill.active{
  background: color-mix(in oklab, var(--accent), white 82%);
  color: color-mix(in oklab, var(--accent), black 14%);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent), white 60%) inset,
    0 0 0 3px color-mix(in oklab, var(--accent), white 75%);
}

/* ===== Accessibility: forced-colors ==================================== */
@media (forced-colors: active){
  :root[data-theme="light"] .vfp-btn,
  :root[data-theme="light"] .btn-icon,
  :root[data-theme="light"] .lang-pill{
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}