/* ============================================
   bootopia meetup #01 — "夜の縁日" theme
   Obsidian Publish custom stylesheet
   Light mode default, Dark mode override
   ============================================ */
/* --- 0. Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');
/* --- 1. Design Tokens (Light = default) --- */
:root {
  --bg-primary: #FAF8F5;
  --bg-secondary: #F0EDE8;
  --gold: #B8860B;
  --orange: #D47900;
  --olive: #5A6A03;
  --warm-red: #C41600;
  --sakura: #D4A5A5;
  --cream: #2A2825;
  --text-muted: #5A5650;
  --text-dim: #8A8580;
  --font-serif: 'Noto Serif JP', 'Yu Mincho', serif;
  --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', sans-serif;
}
/* --- 1b. Dark Mode Tokens --- */
body.theme-dark,
html.theme-dark,
.theme-dark {
  --bg-primary: #212121;
  --bg-secondary: #827575;
  --gold: #FFD700;
  --orange: #FF9100;
  --olive: #788D04;
  --cream: #F5F0E8;
  --text-muted: #C8C3BB;
  --text-dim: #AAA6A0;
}
/* --- 2a. Obsidian Theme Overrides (Light = default) --- */
.publish-view,
body.theme-light,
html.theme-light {
  --background-primary: var(--bg-primary);
  --background-secondary: var(--bg-secondary);
  --background-primary-alt: var(--bg-secondary);
  --text-normal: var(--cream);
  --text-muted: var(--text-muted);
  --text-faint: var(--text-dim);
  --text-accent: var(--gold);
  --interactive-accent: var(--gold);
  --interactive-accent-hover: var(--orange);
  --background-modifier-border: rgba(139, 105, 20, 0.15);
  color-scheme: light;
}
/* --- 2b. Obsidian Theme Overrides (Dark) --- */
body.theme-dark,
html.theme-dark {
  --background-primary: var(--bg-primary);
  --background-secondary: var(--bg-secondary);
  --background-primary-alt: var(--bg-secondary);
  --text-normal: var(--cream);
  --text-muted: var(--text-muted);
  --text-faint: var(--text-dim);
  --text-accent: var(--gold);
  --interactive-accent: var(--gold);
  --interactive-accent-hover: var(--orange);
  --background-modifier-border: rgba(255, 215, 0, 0.15);
  color-scheme: dark;
}
/* --- 3. Base --- */
.publish-view {
  background-color: var(--bg-primary);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
/* --- 4. Organic Background Shapes --- */
.publish-view::before {
  content: '';
  position: fixed;
  top: -15%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 165, 165, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.publish-view::after {
  content: '';
  position: fixed;
  bottom: -10%;
  left: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 22, 0, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.markdown-rendered::before {
  content: '';
  position: fixed;
  top: 40%;
  left: 50%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 106, 3, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body.theme-dark .publish-view::before,
html.theme-dark .publish-view::before {
  background: radial-gradient(circle, rgba(230, 191, 191, 0.06) 0%, transparent 70%);
}
body.theme-dark .publish-view::after,
html.theme-dark .publish-view::after {
  background: radial-gradient(circle, rgba(196, 22, 0, 0.06) 0%, transparent 70%);
}
body.theme-dark .markdown-rendered::before,
html.theme-dark .markdown-rendered::before {
  background: radial-gradient(circle, rgba(120, 141, 4, 0.04) 0%, transparent 70%);
}
/* --- 5. Typography --- */
/* h2: Main heading — serif, body text, gold bottom accent */
.el-h2 h2,
.publish-view h2,
.publish-view h2.publish-article-heading {
  font-family: var(--font-serif);
  font-size: 2em;
  font-weight: 700;
  color: #2A2825;
  line-height: 1.4;
  margin: 1.4em 0 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid rgba(184, 134, 11, 0.25);
}
body.theme-dark .el-h2 h2,
body.theme-dark .publish-view h2,
body.theme-dark .publish-view h2.publish-article-heading,
html.theme-dark .el-h2 h2,
html.theme-dark .publish-view h2,
html.theme-dark .publish-view h2.publish-article-heading {
  color: #F5F0E8;
  border-bottom-color: rgba(255, 215, 0, 0.2);
}
/* h3: Section heading */
.el-h3 h3,
.publish-view h3,
.publish-view h3.publish-article-heading {
  font-family: var(--font-sans);
  font-size: 1.3em;
  font-weight: 700;
  color: #C06000;
  line-height: 1.4;
  margin: 1.5em 0 0.4em;
}
body.theme-dark .el-h3 h3,
body.theme-dark .publish-view h3,
body.theme-dark .publish-view h3.publish-article-heading,
html.theme-dark .el-h3 h3,
html.theme-dark .publish-view h3,
html.theme-dark .publish-view h3.publish-article-heading {
  color: #FFD700;
}
/* h4: Tag-style — body text, left bar */
.el-h4 h4,
.publish-view h4,
.publish-view h4.publish-article-heading {
  font-family: var(--font-sans);
  font-size: 0.95em;
  font-weight: 700;
  color: #2A2825;
  line-height: 1.5;
  margin: 1em 0 0.3em;
  padding-left: 0.5em;
  border-left: 2px solid #8A8580;
}
body.theme-dark .el-h4 h4,
body.theme-dark .publish-view h4,
body.theme-dark .publish-view h4.publish-article-heading,
html.theme-dark .el-h4 h4,
html.theme-dark .publish-view h4,
html.theme-dark .publish-view h4.publish-article-heading {
  color: #F5F0E8;
  border-left-color: #AAA6A0;
}
/* h5: Small heading */
.el-h5 h5,
.publish-view h5,
.publish-view h5.publish-article-heading {
  font-family: var(--font-sans);
  font-size: 0.9em;
  font-weight: 700;
  color: #8A8580;
  line-height: 1.5;
  margin: 0.8em 0 0.2em;
}
body.theme-dark .el-h5 h5,
body.theme-dark .publish-view h5,
body.theme-dark .publish-view h5.publish-article-heading,
html.theme-dark .el-h5 h5,
html.theme-dark .publish-view h5,
html.theme-dark .publish-view h5.publish-article-heading {
  color: #AAA6A0;
}
.publish-view p {
  margin: 0.6em 0;
}
/* --- 6. Callout --- */
.publish-view .callout {
  background: rgba(184, 134, 11, 0.04);
  border-left: 4px solid var(--gold);
  border-radius: 0 4px 4px 0;
  padding: 1em 1.2em;
  margin: 1.2em 0;
}
body.theme-dark .publish-view .callout,
html.theme-dark .publish-view .callout {
  background: rgba(255, 215, 0, 0.04);
}
.publish-view .callout-title {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--gold);
}
.publish-view .callout-content p {
  margin: 0.3em 0;
}
/* --- 7. Horizontal Rule --- */
.publish-view hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--orange), var(--olive), var(--orange), var(--gold));
  margin: 2em 0;
}
/* --- 8. Links --- */
.publish-view a,
.publish-view .internal-link,
.publish-view .external-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
  transition: color 0.2s, border-color 0.2s;
}
body.theme-dark .publish-view a,
body.theme-dark .publish-view .internal-link,
body.theme-dark .publish-view .external-link,
html.theme-dark .publish-view a,
html.theme-dark .publish-view .internal-link,
html.theme-dark .publish-view .external-link {
  border-bottom-color: rgba(255, 215, 0, 0.3);
}
.publish-view a:hover,
.publish-view .internal-link:hover,
.publish-view .external-link:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
/* --- 9. Blockquote --- */
.publish-view blockquote {
  border-left: 3px solid var(--olive);
  color: var(--text-muted);
  padding: 0.5em 1em;
  margin: 1em 0;
  background: rgba(90, 106, 3, 0.04);
  border-radius: 0 4px 4px 0;
}
body.theme-dark .publish-view blockquote,
html.theme-dark .publish-view blockquote {
  background: rgba(120, 141, 4, 0.04);
}
/* --- 10. Lists --- */
.publish-view ul,
.publish-view ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}
.publish-view li {
  margin: 0.3em 0;
}
/* --- 11. Tables --- */
.publish-view table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
.publish-view th,
.publish-view td {
  border: 1px solid rgba(139, 105, 20, 0.15);
  padding: 0.5em 0.8em;
  text-align: left;
}
body.theme-dark .publish-view th,
body.theme-dark .publish-view td,
html.theme-dark .publish-view th,
html.theme-dark .publish-view td {
  border-color: rgba(255, 215, 0, 0.15);
}
.publish-view th {
  font-family: var(--font-sans);
  font-weight: 700;
  background: rgba(184, 134, 11, 0.06);
  color: var(--gold);
}
body.theme-dark .publish-view th,
html.theme-dark .publish-view th {
  background: rgba(255, 215, 0, 0.06);
}
/* --- 12. Images --- */
.publish-view img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: none !important;
}
/* --- 13. Code --- */
.publish-view code {
  font-family: 'Noto Sans JP', monospace;
  font-size: 0.9em;
  background: rgba(184, 134, 11, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  color: var(--orange);
}
body.theme-dark .publish-view code,
html.theme-dark .publish-view code {
  background: rgba(255, 215, 0, 0.06);
}
.publish-view pre {
  background: var(--bg-secondary);
  border: 1px solid rgba(139, 105, 20, 0.1);
  border-radius: 4px;
  padding: 1em;
}
body.theme-dark .publish-view pre,
html.theme-dark .publish-view pre {
  border-color: rgba(255, 215, 0, 0.1);
}
.publish-view pre code {
  background: none;
  padding: 0;
  color: var(--cream);
}
/* --- 14. Navigation / Sidebar --- */
.publish-view .nav-container,
.publish-view .sidebar,
.site-body-left-column {
  background-color: var(--bg-secondary);
  color: var(--text-muted);
  border-right: 1px solid rgba(139, 105, 20, 0.1);
}
body.theme-dark .publish-view .nav-container,
body.theme-dark .publish-view .sidebar,
body.theme-dark .site-body-left-column,
html.theme-dark .publish-view .nav-container,
html.theme-dark .publish-view .sidebar,
html.theme-dark .site-body-left-column {
  border-right-color: rgba(255, 215, 0, 0.1);
}
/* --- 15. Strong / Emphasis --- */
.publish-view strong {
  font-weight: 700;
  color: var(--cream);
}
.publish-view em {
  color: var(--text-muted);
}
/* --- 16. TOC / Outline --- */
.tree-item-self.is-clickable.mod-active,
.outline-item.is-active {
  color: inherit;
  font-weight: inherit;
  background-color: transparent;
}
/* --- 17. Theme Toggle Button --- */
.site-body-left-column-site-theme-toggle {
  cursor: pointer;
}
/* Hide the toggle switch visually, keep in flow to preserve layout */
.site-body-left-column-site-theme-toggle .checkbox-container {
  opacity: 0;
  width: 0;
  overflow: hidden;
}
/* Style icons */
.site-body-left-column-site-theme-toggle .option svg {
  stroke: var(--gold);
  transition: opacity 0.2s ease;
}
.site-body-left-column-site-theme-toggle .option:hover svg {
  opacity: 0.7;
}
/* Both icons always visible */
.site-body-left-column-site-theme-toggle .option.mod-dark,
.site-body-left-column-site-theme-toggle .option.mod-light {
  display: inline !important;
}
/* --- 18. Responsive --- */
@media (max-width: 768px) {
  .publish-view {
    font-size: 15px;
    line-height: 1.75;
  }
  .publish-view h1,
  .el-h2 h2,
  .publish-view h2,
  .publish-view h1.publish-article-heading,
  .publish-view h2.publish-article-heading {
    font-size: 1.6em;
  }
  .el-h3 h3,
  .publish-view h3,
  .publish-view h3.publish-article-heading {
    font-size: 1.2em;
  }
  .el-h4 h4,
  .publish-view h4,
  .publish-view h4.publish-article-heading {
    font-size: 0.85em;
  }
  .publish-view::before,
  .publish-view::after,
  .markdown-rendered::before {
    width: 300px;
    height: 300px;
  }
}