/* common header + site-wide theme support */
:root {
  --site-bg: #0b1020;
  --site-bg-start: #090d1a;
  --site-card: #131a33;
  --site-card-2: #0f1530;
  --site-text: #e8ecff;
  --site-sub: #a8b2d9;
  --site-accent: #7aa2ff;
  --site-line: #24305f;
  --site-button: #17214a;
  --site-button-hover: #20306a;
  --site-shadow: rgba(0, 0, 0, .28);
}

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

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8ff;
  --card: #ffffff;
  --line: #c9d4f3;
  --text: #18213a;
  --sub: #52617f;
  --accent: #315fd6;
  --site-bg: #f6f8ff;
  --site-bg-start: #eef3ff;
  --site-card: #ffffff;
  --site-card-2: #f4f7ff;
  --site-text: #18213a;
  --site-sub: #52617f;
  --site-accent: #315fd6;
  --site-line: #c9d4f3;
  --site-button: #e8efff;
  --site-button-hover: #dbe6ff;
  --site-shadow: rgba(49, 77, 136, .14);
}

.common-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(9, 13, 26, .92);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(122, 162, 255, .25);
}

.common-site-header a,
.common-site-header .common-back-btn,
.common-site-header .common-theme-toggle {
  display: inline-block;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid var(--site-line);
  background: var(--site-button);
  color: var(--site-text);
  text-decoration: none;
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.2;
}

.common-site-header a:hover,
.common-site-header .common-back-btn:hover,
.common-site-header .common-theme-toggle:hover {
  background: var(--site-button-hover);
}

.common-site-header .common-back-btn,
.common-site-header .common-theme-toggle {
  cursor: pointer;
  font-family: inherit;
}

.common-site-header .common-theme-toggle {
  margin-left: auto;
}

body.has-common-header .top-home { display: none !important; }

:root[data-theme="light"] .common-site-header {
  background: rgba(255, 255, 255, .9);
  border-bottom-color: rgba(49, 95, 214, .2);
  box-shadow: 0 1px 10px rgba(49, 77, 136, .08);
}

/* Common page patterns across ishiwari.net. These override older inline dark-only CSS. */
:root[data-theme="light"] body {
  background: linear-gradient(180deg, var(--site-bg-start), var(--site-bg));
  color: var(--site-text);
}

:root[data-theme="light"] .hero,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] article,
:root[data-theme="light"] .container,
:root[data-theme="light"] .content,
:root[data-theme="light"] .markdown-body {
  background-color: var(--site-card);
  border-color: var(--site-line);
  color: var(--site-text);
  box-shadow: 0 8px 24px var(--site-shadow);
}

:root[data-theme="light"] .item,
:root[data-theme="light"] .quick-item,
:root[data-theme="light"] .file-list,
:root[data-theme="light"] textarea,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] pre,
:root[data-theme="light"] code:not(pre code) {
  background-color: var(--site-card-2);
  border-color: var(--site-line);
  color: var(--site-text);
}

:root[data-theme="light"] .btn,
:root[data-theme="light"] button,
:root[data-theme="light"] .top a,
:root[data-theme="light"] .top-home a,
:root[data-theme="light"] .fav-btn {
  background-color: var(--site-button);
  border-color: var(--site-line);
  color: var(--site-text);
}

:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] button:hover,
:root[data-theme="light"] .top a:hover,
:root[data-theme="light"] .top-home a:hover,
:root[data-theme="light"] .quick-item:hover,
:root[data-theme="light"] .fav-btn:hover {
  background-color: var(--site-button-hover);
}

:root[data-theme="light"] a,
:root[data-theme="light"] h2,
:root[data-theme="light"] .section-title,
:root[data-theme="light"] .card h2,
:root[data-theme="light"] .item h2 {
  color: var(--site-accent);
}

:root[data-theme="light"] .lead,
:root[data-theme="light"] .sub,
:root[data-theme="light"] .empty,
:root[data-theme="light"] .status,
:root[data-theme="light"] .folder-status,
:root[data-theme="light"] footer,
:root[data-theme="light"] span,
:root[data-theme="light"] p {
  color: var(--site-sub);
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] li,
:root[data-theme="light"] label,
:root[data-theme="light"] th,
:root[data-theme="light"] td {
  color: var(--site-text);
}

:root[data-theme="light"] .preview {
  background: #ffffff;
  color: #18213a;
}

:root[data-theme="light"] .preview h1,
:root[data-theme="light"] .preview h2,
:root[data-theme="light"] .preview h3 {
  color: #18213a;
}

@media (max-width: 520px) {
  .common-site-header .common-theme-toggle {
    margin-left: 0;
  }
}

body.has-common-header .titleNav { display: none !important; }