/**
 * theme-dark.css — ダークテーマ（hikari）
 *
 * 使い方: ダーク化したいページの {% block stylesheet %} 内で
 *   {% include 'Block/_theme_dark.twig' %}
 * を呼ぶ。block stylesheet は default_frame の FOUC 用インライン style や
 * base CSS 群より「後」に出力されるため、ここでの上書きが確実に勝つ。
 *
 * 既存コンポーネントは base-variables.css の CSS 変数を参照しているので、
 * 1) の :root 上書きだけで大半の要素が自動的にダーク化する。
 * 2) 以降はフォーム等「変数だけでは追従しない箇所」を個別に補正する。
 */

/* =========================================================
   1) トークンをダーク値へ（変数駆動の自動追従）
   ========================================================= */
:root {
  --color-bg: #05050a;
  --color-bg-light: #0f0f17;
  --color-bg-lighter: #0c0c14;
  --color-bg-input: #14141f;

  --color-text: #f3ead6;
  --color-text-secondary: rgba(243, 234, 214, 0.72);
  --color-text-muted: rgba(243, 234, 214, 0.5);
  --color-text-light: rgba(243, 234, 214, 0.55);
  --color-text-dark: #f3ead6;

  /* ダーク背景では明るい金が映える */
  --color-primary: #ffc24d;
  --color-primary-dark: #e0a93b;
  --color-primary-light: rgba(255, 194, 77, 0.14);
  --color-primary-lighter: rgba(255, 194, 77, 0.07);

  --color-border: rgba(255, 255, 255, 0.15);
  --color-border-light: rgba(255, 255, 255, 0.08);
  --color-border-dark: rgba(255, 255, 255, 0.22);

  --shadow-gold: 0 8px 30px rgba(255, 194, 77, 0.35);
}

/* =========================================================
   2) ページ地（FOUC白を上書き）＋共有ダーク背景（L2）
   ========================================================= */
html { background: #05050a !important; }
body {
  background-color: #05050a !important;
  background-image:
    radial-gradient(120% 80% at 50% 120%, rgba(120, 78, 30, 0.30) 0%, rgba(40, 26, 14, 0.10) 35%, rgba(5, 5, 10, 0) 60%),
    linear-gradient(180deg, #0b0b14 0%, #05050a 55%, #0c0805 100%) !important;
  background-attachment: fixed !important;
  color: var(--color-text);
}
main { position: relative; z-index: 2; }

/* 固定ビネット（_brand_background.twig で <div class="hikari-vignette"> を置いた場合に効く） */
.hikari-vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 90% at 50% 42%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.55) 100%);
}
/* フッターは背景レイヤーより前面（フッターは既に独自ダーク #111827） */
main > footer.ec-footer-component, footer.ec-footer-component { position: relative; z-index: 1; }

/* =========================================================
   3) ローディングオーバーレイ
   ========================================================= */
#page-loader { background-color: #05050a !important; }
#page-loader .loader-spinner { border-color: rgba(255, 255, 255, 0.12); border-top-color: #ffc24d; }

/* =========================================================
   4) ヘッダー（トップと同一のダーク・半透明）
   ========================================================= */
.ec-header-component {
  background: rgba(10, 10, 18, 0.55) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ec-header-nav-item, .ec-header-icon-btn, .header-search-toggle { color: #f3ead6 !important; }
.ec-header-nav-item:hover, .ec-header-icon-btn:hover, .header-search-toggle:hover { color: var(--hk-gold-soft) !important; }
.header-search-expandable { background: rgba(18, 16, 26, 0.95) !important; border-color: rgba(255, 255, 255, 0.18) !important; }
.header-search-input { color: #f3ead6 !important; }
.header-search-input::placeholder { color: rgba(243, 234, 214, 0.5) !important; }

/* =========================================================
   5) フォーム（ダーク化の最難所。白い入力欄が浮かないよう一括補正）
   ========================================================= */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
select, textarea,
.form-input, .form-control, .form-select, .ec-input input, .ec-select select, .ec-textarea textarea {
  background-color: #14141f !important;
  color: #f0ece0 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
::placeholder { color: rgba(255, 255, 255, 0.45) !important; }
input:focus, select:focus, textarea:focus,
.form-input:focus, .form-control:focus, .form-select:focus {
  border-color: #ffc24d !important;
  box-shadow: 0 0 0 3px rgba(255, 194, 77, 0.18) !important;
}
/* select の矢印 SVG を明色に差し替え（暗背景で見えるように） */
select, .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23cdbf9f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}
label, .form-label { color: var(--color-text-secondary); }

/* =========================================================
   6) ボタン二次（白地→ダーク面。暗背景で消えないように）
   ========================================================= */
.btn-secondary, .btn-outline, .btn-light {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f3ead6 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-light:hover {
  border-color: var(--hk-gold-soft) !important; color: var(--hk-gold-soft) !important;
}

/* =========================================================
   7) 面（カード/パネル/白背景ユーティリティ/テーブル/区切り）
   ========================================================= */
.card, .panel, .box { background-color: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
.bg-white { background-color: rgba(255, 255, 255, 0.03) !important; }
.bg-gray-50, .bg-gray-100 { background-color: rgba(255, 255, 255, 0.02) !important; }
hr { border-color: rgba(255, 255, 255, 0.12) !important; }
table { color: var(--color-text); }
th, td { border-color: rgba(255, 255, 255, 0.12) !important; }

/* =========================================================
   8) リンク / パンくず
   ========================================================= */
a:hover { color: var(--hk-gold-soft); }
.breadcrumb, .ec-breadcrumb, .breadcrumb a { color: var(--color-text-muted) !important; }

/* =========================================================
   8.5) インラインstyle救済（レガシーページ向け）
   既存ページは色をインライン style にハードコードしている箇所が多く、
   通常CSSでは上書きできない。属性セレクタ + !important で main 配下の
   代表的なグレー/白を変数値へ再トーンする（レイアウトは変えない）。
   ※ ヘッダー/フッターは対象外（別途ダーク済み）。
   ========================================================= */
/* 本文グレー → 明色テキスト */
main [style*="color: #333"], main [style*="color:#333"],
main [style*="color: #222"], main [style*="color: #1f"], main [style*="color: #444"] { color: var(--color-text) !important; }
main [style*="color: #666"], main [style*="color:#666"],
main [style*="color: #555"], main [style*="color: #777"] { color: var(--color-text-secondary) !important; }
main [style*="color: #999"], main [style*="color:#999"],
main [style*="color: #888"], main [style*="color: #aaa"],
main [style*="color: #ccc"], main [style*="color: #ddd"] { color: var(--color-text-muted) !important; }
/* 白／薄グレー背景 → 半透明ダーク面 */
main [style*="background: white"], main [style*="background:#fff"], main [style*="background: #fff"],
main [style*="background-color: #fff"], main [style*="background-color:#fff"],
main [style*="background: #fafafa"], main [style*="background-color: #fafafa"] { background-color: rgba(255, 255, 255, 0.03) !important; }
main [style*="background: #f5f5f5"], main [style*="background-color: #f5f5f5"],
main [style*="background: #f9f9f9"], main [style*="background: #f0f0f0"],
main [style*="background: #ebebeb"], main [style*="background: #eee"] { background-color: rgba(255, 255, 255, 0.04) !important; }
/* main 要素自身のインライン薄背景は地のグラデを透かす */
main[style*="background"] { background-color: transparent !important; }
/* インライン薄ボーダー → ダーク用ボーダー */
main [style*="#e5e5e5"], main [style*="#eee"], main [style*="#f0f0f0"] { border-color: rgba(255, 255, 255, 0.12) !important; }

/* =========================================================
   9) カテゴリ（Block/category.twig）ダーク（トップと同一）
   ========================================================= */
.ec-category-section { background: transparent !important; }
.ec-category-title { color: var(--hk-ink) !important; font-family: "Noto Serif JP", serif !important; font-weight: 300 !important; letter-spacing: .08em; }
.ec-category-tab { color: var(--hk-mute) !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; }
.ec-category-tab.active { color: #1c1404 !important; background: var(--hk-gold-soft) !important; border-color: var(--hk-gold-soft) !important; }
.ec-category-card { border: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(255, 255, 255, 0.02) !important; border-radius: 14px !important; }
.ec-category-card-overlay h3, .ec-category-card-icon h3 { color: #fff !important; }
.ec-category-card-icon { color: var(--hk-gold-soft) !important; }
.ec-category-accordion-header { color: var(--hk-ink) !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; }
.ec-category-accordion-content { background: transparent !important; }