/* Theme system (A-E) using CSS variables + html[data-theme].
   Loaded after base.css/base_responsive.css to override key UI colors.
*/

html {
  /* Keep native controls consistent */
  color-scheme: light;
}

html[data-theme="E"] {
  color-scheme: dark;
}

html[data-theme] {
  /* ===== Defaults (Theme A: Ivory & Oak) ===== */
  --app-bg: #faf6ef;
  --surface-1: #ffffff;
  --surface-2: #f8f2e9;
  --text: #2b2b2b;
  --muted: #6b6258;
  --border: #e6ddcf;
  --shadow: rgba(17, 24, 39, 0.12);

  /* Header split (topbar / mega-nav) */
  --header-top-bg: #f3e9da;
  --header-bottom-bg: #efe4d2;
  /* topbar はもう一段濃く */
  --topbar-bg-1: #efe4d2;
  --topbar-bg-2: #e6d6c0;
  --header-fg: #2b2b2b;
  --header-fg-muted: #6b6258;
  --header-border: rgba(107, 98, 88, 0.22);

  /* Sidebar */
  --sidebar-bg: #e6d6c0;
  --sidebar-fg: #2b2b2b;
  --sidebar-fg-muted: #6b6258;
  --sidebar-border: rgba(107, 98, 88, 0.2);

  /* Subnav / breadcrumbs / footer */
  --crumb-bg: #f8f2e9;
  --footer-bg: #d7c1a6;
  --footer-fg: #2b2b2b;
  --footer-fg-muted: #6b6258;

  /* Footer hover */
  --footer-hover-overlay: rgba(138, 90, 43, 0.12);

  /* Accent */
  --accent: #8a5a2b;
  --accent-hover: #6f4722;
  --accent-soft: rgba(138, 90, 43, 0.14);
  --accent-contrast: #ffffff;

  /* Nav hover (mega-nav / subnav / sidebar items) */
  --nav-hover-fg: var(--accent);
  --nav-hover-overlay: rgba(138, 90, 43, 0.18);
  --mega-nav-hover-bg: rgba(138, 90, 43, 0.16);
  --mega-nav-active-bg: rgba(138, 90, 43, 0.22);

  --focus-ring: rgba(138, 90, 43, 0.65);

  /* Subnav "noren" variables (base.css uses these) */
  --noren-wood-1: #d7c1a6;
  --noren-wood-2: #c9ae8d;
  --noren-wood-shadow: rgba(107, 98, 88, 0.28);
  --noren-fabric-1: #f3e9da;
  --noren-fabric-2: #efe4d2;
  --noren-ink: #2b2b2b;
  --noren-stitch: rgba(107, 98, 88, 0.32);
  --noren-active-1: var(--accent);
  --noren-active-2: var(--accent-hover);
  --noren-active-stitch: rgba(255, 255, 255, 0.55);
}

/* ===== Theme B: Sake Mist（白藍 → 霧がかった青みグレー） ===== */
html[data-theme="B"] {
  --app-bg: #f7fafd;
  --surface-2: #f4f8fb;
  --text: #1f2a37;
  --muted: #556274;
  --border: #d6e1ea;

  --header-top-bg: #eef4f9;
  --header-bottom-bg: #e9f0f6;
  /* topbar はもう一段濃く */
  --topbar-bg-1: #e9f0f6;
  --topbar-bg-2: #dde8f1;
  --header-fg: #1f2a37;
  --header-fg-muted: #556274;
  --header-border: rgba(85, 98, 116, 0.22);

  --sidebar-bg: #dde8f1;
  --sidebar-fg: #1f2a37;
  --sidebar-fg-muted: #556274;
  --sidebar-border: rgba(85, 98, 116, 0.2);

  --crumb-bg: #f4f8fb;
  --footer-bg: #cfe0ec;
  --footer-fg: #1f2a37;
  --footer-fg-muted: #556274;

  --footer-hover-overlay: rgba(44, 111, 163, 0.12);

  --accent: #2c6fa3;
  --accent-hover: #245b85;
  --accent-soft: rgba(44, 111, 163, 0.14);
  --focus-ring: rgba(44, 111, 163, 0.6);

  --nav-hover-fg: var(--accent);
  --nav-hover-overlay: rgba(44, 111, 163, 0.18);
  --mega-nav-hover-bg: rgba(44, 111, 163, 0.14);
  --mega-nav-active-bg: rgba(44, 111, 163, 0.2);

  --noren-wood-1: #cfe0ec;
  --noren-wood-2: #bcd3e3;
  --noren-fabric-1: #eef4f9;
  --noren-fabric-2: #e9f0f6;
  --noren-ink: #1f2a37;
  --noren-stitch: rgba(44, 111, 163, 0.22);
  --noren-active-1: var(--accent);
  --noren-active-2: var(--accent-hover);
}

/* ===== Theme C: Hops & Stone（薄いセージ → 石っぽいグレー） ===== */
html[data-theme="C"] {
  --app-bg: #f7faf7;
  --surface-2: #f4f8f4;
  --text: #24302a;
  --muted: #5f6e65;
  --border: #d9e3db;

  --header-top-bg: #eef4ef;
  --header-bottom-bg: #e8efe8;
  /* topbar はもう一段濃く */
  --topbar-bg-1: #e8efe8;
  --topbar-bg-2: #d8e3da;
  --header-fg: #24302a;
  --header-fg-muted: #5f6e65;
  --header-border: rgba(95, 110, 101, 0.22);

  --sidebar-bg: #d8e3da;
  --sidebar-fg: #24302a;
  --sidebar-fg-muted: #5f6e65;
  --sidebar-border: rgba(95, 110, 101, 0.2);

  --crumb-bg: #f4f8f4;
  --footer-bg: #c8d6cb;
  --footer-fg: #24302a;
  --footer-fg-muted: #5f6e65;

  --footer-hover-overlay: rgba(47, 107, 79, 0.12);

  --accent: #2f6b4f;
  --accent-hover: #265640;
  --accent-soft: rgba(47, 107, 79, 0.14);
  --focus-ring: rgba(47, 107, 79, 0.6);

  --nav-hover-fg: var(--accent);
  --nav-hover-overlay: rgba(47, 107, 79, 0.18);
  --mega-nav-hover-bg: rgba(47, 107, 79, 0.14);
  --mega-nav-active-bg: rgba(47, 107, 79, 0.2);

  --noren-wood-1: #c8d6cb;
  --noren-wood-2: #b9cbbd;
  --noren-fabric-1: #eef4ef;
  --noren-fabric-2: #e8efe8;
  --noren-ink: #24302a;
  --noren-stitch: rgba(47, 107, 79, 0.22);
  --noren-active-1: var(--accent);
  --noren-active-2: var(--accent-hover);
}

/* ===== Theme D: Rosé Sand（ロゼの気配 → 砂のニュートラル） ===== */
html[data-theme="D"] {
  --app-bg: #fcf8f8;
  --surface-2: #fbf4f4;
  --text: #2a2224;
  --muted: #6c5c60;
  --border: #e7d9db;

  --header-top-bg: #f7eeee;
  --header-bottom-bg: #f5e9e9;
  /* topbar はもう一段濃く */
  --topbar-bg-1: #f5e9e9;
  --topbar-bg-2: #e8dada;
  --header-fg: #2a2224;
  --header-fg-muted: #6c5c60;
  --header-border: rgba(108, 92, 96, 0.22);

  --sidebar-bg: #e8dada;
  --sidebar-fg: #2a2224;
  --sidebar-fg-muted: #6c5c60;
  --sidebar-border: rgba(108, 92, 96, 0.2);

  --crumb-bg: #fbf4f4;
  --footer-bg: #d9c5c6;
  --footer-fg: #2a2224;
  --footer-fg-muted: #6c5c60;

  --footer-hover-overlay: rgba(138, 61, 74, 0.12);

  --accent: #8a3d4a;
  --accent-hover: #6f303b;
  --accent-soft: rgba(138, 61, 74, 0.14);
  --focus-ring: rgba(138, 61, 74, 0.6);

  --nav-hover-fg: var(--accent);
  --nav-hover-overlay: rgba(138, 61, 74, 0.18);
  --mega-nav-hover-bg: rgba(138, 61, 74, 0.14);
  --mega-nav-active-bg: rgba(138, 61, 74, 0.2);

  --noren-wood-1: #d9c5c6;
  --noren-wood-2: #cdb3b6;
  --noren-fabric-1: #f7eeee;
  --noren-fabric-2: #f5e9e9;
  --noren-ink: #2a2224;
  --noren-stitch: rgba(108, 92, 96, 0.24);
  --noren-active-1: var(--accent);
  --noren-active-2: var(--accent-hover);
}

/* ===== Theme E: Night Bar（ダークでも目に優しい） ===== */
html[data-theme="E"] {
  --app-bg: #0b1220;
  --surface-1: #121a2a;
  --surface-2: #0e1626;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #24324a;
  --shadow: rgba(0, 0, 0, 0.45);

  --header-top-bg: #0f172a;
  --header-bottom-bg: #0f172a;
  /* topbar はもう一段濃く（mega-navは据え置き） */
  --topbar-bg-1: #0b1220;
  --topbar-bg-2: #0f172a;
  --header-fg: #e5e7eb;
  --header-fg-muted: #cbd5e1;
  --header-border: rgba(148, 163, 184, 0.22);

  --sidebar-bg: #111c2d;
  --sidebar-fg: #e5e7eb;
  --sidebar-fg-muted: #9ca3af;
  --sidebar-border: rgba(148, 163, 184, 0.18);

  --crumb-bg: #0e1626;
  --footer-bg: #0a1020;
  --footer-fg: #e5e7eb;
  --footer-fg-muted: #9ca3af;

  --footer-hover-overlay: rgba(255, 255, 255, 0.06);

  --accent: #60a5fa;
  --accent-hover: #3b82f6;
  --accent-soft: rgba(96, 165, 250, 0.16);
  --focus-ring: rgba(96, 165, 250, 0.85);

  --nav-hover-fg: var(--text);
  --nav-hover-overlay: rgba(96, 165, 250, 0.22);
  --mega-nav-hover-bg: rgba(96, 165, 250, 0.16);
  --mega-nav-active-bg: rgba(96, 165, 250, 0.22);

  --noren-wood-1: #1f2a3e;
  --noren-wood-2: #162035;
  --noren-wood-shadow: rgba(0, 0, 0, 0.45);
  --noren-fabric-1: #0f1a2b;
  --noren-fabric-2: #0f172a;
  --noren-ink: #e5e7eb;
  --noren-stitch: rgba(156, 163, 175, 0.28);
  --noren-active-1: var(--accent);
  --noren-active-2: var(--accent-hover);
}

/* ===== Global overrides wired to variables ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 1.5px solid var(--focus-ring);
}

body {
  background: var(--app-bg);
  color: var(--text);
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 1px 3px var(--shadow);
}
.topbar {
  background: linear-gradient(180deg, var(--topbar-bg-1, var(--header-top-bg)), var(--topbar-bg-2, var(--header-bottom-bg)));
  border-bottom: 1px solid var(--header-border);
}
.topbar-title {
  color: var(--header-fg);
}
.topbar-welcome {
  color: var(--header-fg-muted);
}

.topbar-icon-btn {
  color: var(--header-fg);
}

.mobile-sidebar-toggle {
  color: var(--header-fg);
}
.hamburger-icon span {
  background-color: var(--header-fg);
}

/* Search input stays light for readability */
.topbar-search input[type="text"] {
  background: var(--surface-1);
  border-color: var(--border);
  color: var(--text);
}
.topbar-search .search-input-wrap .search-icon {
  color: var(--muted);
}
.topbar-search .search-input-wrap .clear-btn {
  color: var(--muted);
}
.topbar-search input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
}

/* Header buttons (login/mypage) follow accent */
.topbar-nav-btn-mypage,
.topbar-nav-btn-login {
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, 0));
  border-color: rgba(255, 255, 255, 0.22);
}
.topbar-nav-btn-mypage:hover,
.topbar-nav-btn-login:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--accent-contrast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Subnav hover accent */
.subnav-item:hover {
  color: var(--nav-hover-fg, var(--accent));
}

/* Breadcrumbs */
.breadcrumbs {
  background: var(--crumb-bg);
  border-bottom: 1px solid var(--border);
}
.breadcrumbs a {
  color: var(--text);
}
.breadcrumbs a:hover {
  color: var(--accent);
}
.breadcrumbs span {
  color: var(--muted);
}

/* Sidebar */
.sidebar {
  background: var(--sidebar-bg);
  border-right-color: var(--sidebar-border);
  scrollbar-color: rgba(148, 163, 184, 0.5) var(--sidebar-bg);
}
.sidebar-admin,
.sidebar-nav,
.sidebar-mega-nav {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.sidebar-admin-btn {
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, 0));
  border-color: rgba(255, 255, 255, 0.22);
}
.sidebar-admin-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--accent-contrast);
}
.sidebar-welcome span {
  color: var(--sidebar-fg);
}
.sidebar-mega-nav h3,
.sidebar-categories h3 {
  color: var(--sidebar-fg);
}
.sidebar-mega-nav__item,
.sidebar-category__item {
  color: var(--sidebar-fg-muted);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.sidebar-mega-nav__item:hover,
.sidebar-category__item:hover {
  color: var(--sidebar-fg);
}

.sidebar-nav-btn-mypage,
.sidebar-nav-btn-login,
.sidebar-nav-btn-signup {
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, 0));
  border-color: rgba(255, 255, 255, 0.22);
}
.sidebar-nav-btn-mypage:hover,
.sidebar-nav-btn-login:hover,
.sidebar-nav-btn-signup:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--accent-contrast);
}

/* Content */
#content {
  background: transparent;
}
.content-container {
  color: var(--text);
}

/* Footer */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
}
.footer-category-item a {
  color: var(--footer-fg);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.footer-category-item a:hover {
  color: var(--header-fg);
}
.footer-links a {
  color: var(--footer-fg-muted);
}
.footer-links a:hover {
  color: var(--footer-fg);
}
.site-footer p {
  color: var(--footer-fg-muted);
}

/* ===== Theme Switcher UI ===== */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.theme-switcher__icon {
  color: var(--header-fg);
  font-size: 16px;
}
.theme-switcher__label {
  color: var(--header-fg-muted);
  font-size: 12px;
  white-space: nowrap;
}
.theme-switcher__select {
  background: rgba(255, 255, 255, 0.08);
  color: var(--header-fg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}
.theme-switcher__select option {
  color: #111827;
}

/* Sidebar switcher uses sidebar colors */
.theme-switcher--sidebar .theme-switcher__icon {
  color: var(--sidebar-fg);
}
.theme-switcher--sidebar .theme-switcher__label {
  color: var(--sidebar-fg);
}
.theme-switcher--sidebar .theme-switcher__select {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sidebar-fg);
  border-color: rgba(0,0,0, 0.2);
}

/* Desktop mega-nav colors (base_responsive.css sets these; override here) */
@media screen and (min-width: 1024px) {
  .mega-nav {
    border-top-color: var(--header-border);
    border-bottom-color: var(--header-border);
    background: var(--header-bottom-bg);
  }
  .mega-nav__item {
    color: var(--header-fg-muted);
    border-right-color: var(--header-border);
  }
  .mega-nav__item:hover {
    background-color: var(--mega-nav-hover-bg, rgba(255, 255, 255, 0.06));
    color: var(--header-fg);
  }
  .mega-nav__item:active {
    background-color: var(--mega-nav-active-bg, rgba(255, 255, 255, 0.1));
    color: var(--header-fg);
  }
  .mega-nav__item.active {
    background-color: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
  }
  .mega-nav__item.active:hover {
    background-color: var(--accent-hover);
  }
  .mega-nav__item.active::after {
    background-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 -1px 2px rgba(255, 255, 255, 0.25);
  }
}