/* ============================================================
   UNIVERSE THEME SYSTEM — Obsidian Publish
   ============================================================
   Themes:
     Wisteria Eventide       (Universe -1)  — Fiction / Fantasy
     Hydrangea Meridian      (Universe  0)  — Present / Grounded
     Chrysanthemum Luminance (Universe +1)  — Future / Vision
   
   Obsidian Publish natively places data-universe on the
   .markdown-preview-view element from frontmatter.
   Each stacked page lives inside a .publish-renderer container.
   
   We propagate data-universe up to .publish-renderer via JS,
   then scope all theming to that container level.
   ============================================================ */

/* ============================================================
   0. FONT IMPORTS
   ============================================================ */
/* Hydrangea Meridian (Universe 0) */
@import url('https://fonts.googleapis.com/css2?family=Overlock:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');

/* Wisteria Eventide (Universe -1) */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* Chrysanthemum Luminance (Universe +1) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* ============================================================
   1. DEFAULT / FALLBACK — HYDRANGEA MERIDIAN (Universe 0)
   ============================================================ */
:root {
  /* --- Palette --- */
  --bg-primary:              #141d28;
  --bg-secondary:            #1a2535;
  --bg-tertiary:             #233346;
  --bg-hover:                #2a3d54;
  --bg-sidebar:              #233346;

  --text-body:               #C3C3C3;
  --text-muted:              #8899aa;
  --text-headings:           #F2F2F2;
  --text-page-title:         #FFBE49;
  --text-bold:               #FF4E4E;
  --text-italic:             #FF7EA2;
  --text-selection-bg:       #EE1D0D;
  --text-selection-fg:       #FFFFFF;

  --link-internal:           #C26EFF;
  --link-external:           #7CE973;
  --link-hover:              #92FFFF;
  --link-unresolved:         #7A6DAA;

  --accent-primary:          #C26EFF;
  --accent-secondary:        #FFBE49;
  --accent-highlight-bg:     #FFFF80;
  --accent-highlight-text:   #47405E;
  --accent-tag:              #FFD17E;

  --border-subtle:           #2a3d54;
  --border-emphasis:         #7A6DAA;

  --blockquote-bg:           #171B23;
  --blockquote-border:       #D9A13C;
  --blockquote-text:         #D9A13C;

  --code-bg:                 #1a1e2e;
  --code-text:               #e2e8f0;

  --icon-default:            #FBCC77;
  --icon-hover:              #81FFEA;

  --scrollbar-thumb:         #3a4a5e;
  --scrollbar-track:         var(--bg-primary);

  /* --- Typography --- */
  --font-body:               'Overlock', sans-serif;
  --font-heading:            'Raleway', sans-serif;
  --font-mono:               'Fira Code', monospace;
  --font-body-weight:        400;
  --font-body-line-height:   1.7;
  --font-size-body:          1em;
  --font-size-page-title:    1.45em;
  --font-size-h1:            1.3em;
  --font-size-h2:            1.1em;
  --font-size-h3:            0.95em;
  --letter-spacing-body:     0;
  --letter-spacing-heading:  0;

  /* --- Transitions --- */
  --theme-transition-duration: 0.4s;
}


/* ============================================================
   2. Override Obsidian Publish built-in variables
   ============================================================ */
:root,
body,
.theme-dark,
.theme-light {
  --background-primary:         var(--bg-primary) !important;
  --background-primary-alt:     var(--bg-secondary) !important;
  --background-secondary:       var(--bg-secondary) !important;
  --background-secondary-alt:   var(--bg-tertiary) !important;
  --background-modifier-border: var(--border-subtle) !important;
  --background-modifier-hover:  var(--bg-hover) !important;
  --text-normal:                var(--text-body) !important;
  --text-muted:                 var(--text-muted) !important;
  --text-faint:                 var(--text-muted) !important;
  --text-accent:                var(--accent-primary) !important;
  --text-accent-hover:          var(--link-hover) !important;
  --interactive-accent:         var(--accent-primary) !important;
  --interactive-accent-hover:   var(--link-hover) !important;
}


/* ============================================================
   3. GLOBAL / BODY STYLES
   ============================================================ */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-body) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--font-body-weight) !important;
  font-size: var(--font-size-body) !important;
  line-height: var(--font-body-line-height) !important;
  letter-spacing: var(--letter-spacing-body) !important;
}

.published-container,
.render-container-inner,
.site-body,
.site-body-left-column,
.site-body-right-column,
.not-found-container {
  background-color: var(--bg-primary) !important;
}

/* --- Sidebar: themed by body[data-universe] --- */
.site-body-left-column,
.site-header,
.nav-view-outer {
  background-color: var(--bg-sidebar) !important;
  transition: background-color var(--theme-transition-duration, 0.4s) ease;
}

.nav-folder-title,
.nav-file-title {
  color: var(--text-body) !important;
  font-family: var(--font-body) !important;
  transition: color var(--theme-transition-duration, 0.4s) ease;
}

.nav-file-title:hover,
.nav-folder-title:hover {
  color: var(--text-headings) !important;
  background-color: var(--bg-hover) !important;
}

.nav-file-title.is-active {
  color: var(--accent-primary) !important;
}

/* --- Sidebar universe overrides via body --- */
body[data-universe="-1"] .site-body-left-column,
body[data-universe="-1"] .site-header,
body[data-universe="-1"] .nav-view-outer {
  background-color: #1a1324 !important;
}
body[data-universe="-1"] .nav-folder-title,
body[data-universe="-1"] .nav-file-title {
  color: #d0c4df !important;
}
body[data-universe="-1"] .nav-file-title:hover,
body[data-universe="-1"] .nav-folder-title:hover {
  color: #f0e6ff !important;
  background-color: #2e2240 !important;
}
body[data-universe="-1"] .nav-file-title.is-active {
  color: #c49cff !important;
}
body[data-universe="-1"] .site-body-left-column .search-input-container input,
body[data-universe="-1"] .site-body-left-column .site-body-left-column-site-name {
  color: #f0e6ff !important;
}

body[data-universe="1"] .site-body-left-column,
body[data-universe="1"] .site-header,
body[data-universe="1"] .nav-view-outer {
  background-color: #0e161c !important;
}
body[data-universe="1"] .nav-folder-title,
body[data-universe="1"] .nav-file-title {
  color: #b8ccd8 !important;
}
body[data-universe="1"] .nav-file-title:hover,
body[data-universe="1"] .nav-folder-title:hover {
  color: #e8f4ff !important;
  background-color: #1a2a36 !important;
}
body[data-universe="1"] .nav-file-title.is-active {
  color: #4de8c2 !important;
}
body[data-universe="1"] .site-body-left-column .search-input-container input,
body[data-universe="1"] .site-body-left-column .site-body-left-column-site-name {
  color: #e8f4ff !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
}

::selection {
  background-color: var(--text-selection-bg) !important;
  color: var(--text-selection-fg) !important;
}


/* ============================================================
   4. PER-PANE THEME SCOPING
   ============================================================
   Each .publish-renderer gets [data-universe] propagated
   from its child .markdown-preview-view by publish.js.
   We scope ALL content styling to this container.
   ============================================================ */

/* --- Helper mixin via CSS: define per-universe variables
       on the .publish-renderer level --- */

.publish-renderer[data-universe="0"],
.publish-renderer:not([data-universe]) {
  --bg-primary:              #141d28;
  --bg-secondary:            #1a2535;
  --bg-tertiary:             #233346;
  --bg-hover:                #2a3d54;
  --text-body:               #C3C3C3;
  --text-muted:              #8899aa;
  --text-headings:           #F2F2F2;
  --text-page-title:         #FFBE49;
  --text-bold:               #FF4E4E;
  --text-italic:             #FF7EA2;
  --text-selection-bg:       #EE1D0D;
  --link-internal:           #C26EFF;
  --link-external:           #7CE973;
  --link-hover:              #92FFFF;
  --link-unresolved:         #7A6DAA;
  --accent-primary:          #C26EFF;
  --accent-secondary:        #FFBE49;
  --accent-highlight-bg:     #FFFF80;
  --accent-highlight-text:   #47405E;
  --accent-tag:              #FFD17E;
  --border-subtle:           #2a3d54;
  --border-emphasis:         #7A6DAA;
  --blockquote-bg:           #171B23;
  --blockquote-border:       #D9A13C;
  --blockquote-text:         #D9A13C;
  --code-bg:                 #1a1e2e;
  --code-text:               #e2e8f0;
  --font-body:               'Overlock', sans-serif;
  --font-heading:            'Raleway', sans-serif;
  --font-mono:               'Fira Code', monospace;
  --font-body-weight:        400;
  --font-body-line-height:   1.7;
  --font-size-body:          1em;
  --font-size-page-title:    1.45em;
  --font-size-h1:            1.3em;
  --font-size-h2:            1.1em;
  --font-size-h3:            0.95em;
  --letter-spacing-body:     0;
  --letter-spacing-heading:  0;
}

.publish-renderer[data-universe="-1"] {
  --bg-primary:              #120e18;
  --bg-secondary:            #1a1324;
  --bg-tertiary:             #241a32;
  --bg-hover:                #2e2240;
  --text-body:               #d0c4df;
  --text-muted:              #8a7da0;
  --text-headings:           #f0e6ff;
  --text-page-title:         #e8b4f8;
  --text-bold:               #ff6b8a;
  --text-italic:             #f4a4c0;
  --text-selection-bg:       #9b59b6;
  --link-internal:           #c49cff;
  --link-external:           #a8d8b9;
  --link-hover:              #f0c0ff;
  --link-unresolved:         #6b5a8e;
  --accent-primary:          #c49cff;
  --accent-secondary:        #e8b4f8;
  --accent-highlight-bg:     #e8b4f8;
  --accent-highlight-text:   #1a1324;
  --accent-tag:              #d4a0e0;
  --border-subtle:           #2e2240;
  --border-emphasis:         #7b5ea7;
  --blockquote-bg:           #1a1324;
  --blockquote-border:       #a678c8;
  --blockquote-text:         #d4b8e8;
  --code-bg:                 #16101f;
  --code-text:               #d8cce8;
  --font-body:               'Lora', serif;
  --font-heading:            'Cormorant Garamond', serif;
  --font-mono:               'Fira Code', monospace;
  --font-body-weight:        400;
  --font-body-line-height:   1.8;
  --font-size-body:          1em;
  --font-size-page-title:    1.8em;
  --font-size-h1:            1.6em;
  --font-size-h2:            1.25em;
  --font-size-h3:            1em;
  --letter-spacing-body:     0.01em;
  --letter-spacing-heading:  0.02em;
}

.publish-renderer[data-universe="1"],
.publish-renderer[data-universe="+1"] {
  --bg-primary:              #0a1014;
  --bg-secondary:            #0e161c;
  --bg-tertiary:             #141f28;
  --bg-hover:                #1a2a36;
  --text-body:               #b8ccd8;
  --text-muted:              #6a8899;
  --text-headings:           #e8f4ff;
  --text-page-title:         #4de8c2;
  --text-bold:               #ff8c5a;
  --text-italic:             #64d8f0;
  --text-selection-bg:       #1a8870;
  --link-internal:           #4de8c2;
  --link-external:           #82b0ff;
  --link-hover:              #80ffdd;
  --link-unresolved:         #3a6a5e;
  --accent-primary:          #4de8c2;
  --accent-secondary:        #64d8f0;
  --accent-highlight-bg:     #4de8c2;
  --accent-highlight-text:   #0a1014;
  --accent-tag:              #64d8f0;
  --border-subtle:           #1a2a36;
  --border-emphasis:         #2a7a68;
  --blockquote-bg:           #0e161c;
  --blockquote-border:       #4de8c2;
  --blockquote-text:         #8ad8c4;
  --code-bg:                 #0c1218;
  --code-text:               #c0dce8;
  --font-body:               'Space Grotesk', sans-serif;
  --font-heading:            'Outfit', sans-serif;
  --font-mono:               'Space Mono', monospace;
  --font-body-weight:        400;
  --font-body-line-height:   1.7;
  --font-size-body:          1em;
  --font-size-page-title:    1.65em;
  --font-size-h1:            1.5em;
  --font-size-h2:            1.2em;
  --font-size-h3:            1em;
  --letter-spacing-body:     0.02em;
  --letter-spacing-heading:  0.03em;
}


/* ============================================================
   5. CONTENT STYLES SCOPED TO .publish-renderer
   ============================================================
   All styles use var() so they automatically resolve to
   whichever universe's variables are set on the ancestor
   .publish-renderer element.
   ============================================================ */

/* --- Pane background --- */
.publish-renderer {
  background-color: var(--bg-primary) !important;
  transition: background-color var(--theme-transition-duration, 0.4s) ease;
}

.publish-renderer .markdown-preview-view {
  font-family: var(--font-body) !important;
  color: var(--text-body) !important;
  line-height: var(--font-body-line-height) !important;
  letter-spacing: var(--letter-spacing-body) !important;
  background-color: var(--bg-primary) !important;
  transition: background-color var(--theme-transition-duration, 0.4s) ease,
              color var(--theme-transition-duration, 0.4s) ease;
}

/* --- Headings --- */
.publish-renderer h1,
.publish-renderer h2,
.publish-renderer h3,
.publish-renderer h4,
.publish-renderer h5,
.publish-renderer h6 {
  font-family: var(--font-heading) !important;
  color: var(--text-headings) !important;
  letter-spacing: var(--letter-spacing-heading) !important;
}

.publish-renderer .mod-header {
  font-family: var(--font-heading) !important;
  color: var(--text-page-title) !important;
  font-size: var(--font-size-page-title) !important;
}

/* Extra specificity to ensure page titles respect our sizing */
.publish-renderer .mod-header .page-header,
.publish-renderer .mod-header .page-title,
.publish-renderer .mod-header h1,
.publish-renderer .markdown-preview-view .mod-header {
  font-size: var(--font-size-page-title) !important;
  font-family: var(--font-heading) !important;
}

.publish-renderer h1 { font-size: var(--font-size-h1) !important; }
.publish-renderer h2 { font-size: var(--font-size-h2) !important; }
.publish-renderer h3 { font-size: var(--font-size-h3) !important; }

/* --- Text formatting --- */
.publish-renderer strong {
  color: var(--text-bold) !important;
}

.publish-renderer em {
  color: var(--text-italic) !important;
}

/* --- Links --- */
.publish-renderer .internal-link {
  color: var(--link-internal) !important;
  text-decoration: none;
}

.publish-renderer .internal-link:hover {
  color: var(--link-hover) !important;
}

.publish-renderer a[href^="http"] {
  color: var(--link-external) !important;
}

.publish-renderer a[href^="http"]:hover {
  color: var(--link-hover) !important;
}

/* --- Tags --- */
.publish-renderer .tag {
  color: var(--accent-tag) !important;
}

/* --- Highlights --- */
.publish-renderer mark {
  background-color: var(--accent-highlight-bg) !important;
  color: var(--accent-highlight-text) !important;
  padding: 1px 4px;
  border-radius: 3px;
}

/* --- Blockquotes --- */
.publish-renderer blockquote {
  background-color: var(--blockquote-bg) !important;
  color: var(--blockquote-text) !important;
  padding: 8px 14px;
  line-height: 1.6em;
  border-left: 3px solid var(--blockquote-border) !important;
  border-right: none;
  border-bottom: none;
  border-top: none;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 20px -8px;
  margin: 1em 0;
}

/* --- Code --- */
.publish-renderer code {
  font-family: var(--font-mono) !important;
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}

.publish-renderer pre {
  background-color: var(--code-bg) !important;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
}

.publish-renderer pre code {
  padding: 0;
  background: none !important;
}

/* --- Tables --- */
.publish-renderer table {
  border-collapse: collapse;
  width: 100%;
}

.publish-renderer th {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-headings) !important;
  font-family: var(--font-heading) !important;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle) !important;
}

.publish-renderer td {
  padding: 8px 12px;
  border: 1px solid var(--border-subtle) !important;
}

.publish-renderer tr:nth-child(even) {
  background-color: var(--bg-secondary);
}

/* --- Horizontal rule --- */
.publish-renderer hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 2em 0;
}

/* --- Images --- */
.publish-renderer img {
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* --- Frontmatter display --- */
.publish-renderer .el-pre.mod-frontmatter {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px;
}

/* --- Footer --- */
.publish-renderer .mod-footer {
  border-top: 1px solid var(--border-subtle) !important;
}


/* ============================================================
   6. HOVER PREVIEW (POPOVER) THEMING
   ============================================================ */

.popover {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-emphasis) !important;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: popover-fade-in 0.35s ease-out;
}

.popover .markdown-preview-view {
  background-color: var(--bg-secondary) !important;
  padding: 16px;
}

.popover[data-universe-shift="true"] {
  border-top: 2px solid var(--accent-primary) !important;
  animation: popover-universe-shift 0.45s ease-out;
}

/* Popover-specific universe overrides */
.popover[data-universe="0"] {
  --bg-secondary: #1a2535;
  --border-emphasis: #7A6DAA;
  --accent-primary: #C26EFF;
}
.popover[data-universe="-1"] {
  --bg-secondary: #1a1324;
  --border-emphasis: #7b5ea7;
  --accent-primary: #c49cff;
}
.popover[data-universe="1"],
.popover[data-universe="+1"] {
  --bg-secondary: #0e161c;
  --border-emphasis: #2a7a68;
  --accent-primary: #4de8c2;
}

@keyframes popover-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes popover-universe-shift {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    filter: brightness(1.3);
  }
  50% {
    filter: brightness(1.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}


/* ============================================================
   7. UNIVERSE LINK INDICATORS
   ============================================================ */

.internal-link[data-target-universe="-1"] {
  color: #c49cff !important;
}
.internal-link[data-target-universe="-1"]::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #c49cff;
  margin-right: 4px;
  vertical-align: middle;
  opacity: 0.7;
}

.internal-link[data-target-universe="0"]::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #C26EFF;
  margin-right: 4px;
  vertical-align: middle;
  opacity: 0.7;
}

.internal-link[data-target-universe="1"]::before,
.internal-link[data-target-universe="+1"]::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4de8c2;
  margin-right: 4px;
  vertical-align: middle;
  opacity: 0.7;
}

.internal-link[data-target-universe="1"],
.internal-link[data-target-universe="+1"] {
  color: #4de8c2 !important;
}

/* Hide dot for same-universe links */
.publish-renderer[data-universe="-1"] .internal-link[data-target-universe="-1"]::before,
.publish-renderer[data-universe="0"] .internal-link[data-target-universe="0"]::before,
.publish-renderer:not([data-universe]) .internal-link[data-target-universe="0"]::before,
.publish-renderer[data-universe="1"] .internal-link[data-target-universe="1"]::before,
.publish-renderer[data-universe="+1"] .internal-link[data-target-universe="+1"]::before {
  display: none;
}
/* Reset color for same-universe links */
.publish-renderer[data-universe="-1"] .internal-link[data-target-universe="-1"],
.publish-renderer[data-universe="0"] .internal-link[data-target-universe="0"],
.publish-renderer:not([data-universe]) .internal-link[data-target-universe="0"],
.publish-renderer[data-universe="1"] .internal-link[data-target-universe="1"],
.publish-renderer[data-universe="+1"] .internal-link[data-target-universe="+1"] {
  color: var(--link-internal) !important;
}


/* ============================================================
   8. EXTENSIBILITY TEMPLATE
   ============================================================
   To add Universe -5 (e.g. a fantasy novel):
   
   .publish-renderer[data-universe="-5"] {
     --bg-primary:            #1a0a0a;
     --bg-secondary:          #2a1010;
     ... etc for all variables ...
   }
   
   Then add "-5" to DEFINED_UNIVERSES in publish.js.
   Undefined negatives fall back to -1, positives to +1.
   ============================================================ */