/* ═══════════════════════════════════════════════════════════
   SPUNK — Obsidian Publish skin
   navy carries · azure accents · green crowns
   Palette: navy #202A44 · azure #2E96D6 · tennis-ball #CCFF00
            gunmetal #52565E
   Upload as publish.css from the vault root via the Publish
   dialog — it themes the whole published site.
   ═══════════════════════════════════════════════════════════ */

:root {
  --spunk-navy-deep:   #151C30;
  --spunk-navy:        #202A44;
  --spunk-navy-raised: #2A3757;
  --spunk-navy-line:   #3A4A75;
  --spunk-azure:       #2E96D6;
  --spunk-azure-hi:    #55ACE2;
  --spunk-azure-soft:  #8FC9EC;
  --spunk-azure-ink:   #1E7DB8;
  --spunk-green:       #CCFF00;
  --spunk-green-ink:   #5A6E00;
  --spunk-gunmetal:    #52565E;
  --spunk-steel:       #9AA1AD;
}

.published-container {
  --page-width: 46em;
  --accent-h: 203;
  --accent-s: 65%;
  --accent-l: 51%;
}

/* ── DARK — the navy coat ─────────────────────────────────── */
body.theme-dark {
  --background-primary: var(--spunk-navy);
  --background-primary-alt: var(--spunk-navy-deep);
  --background-secondary: var(--spunk-navy-deep);
  --background-secondary-alt: var(--spunk-navy-raised);
  --background-modifier-border: var(--spunk-navy-line);
  --background-modifier-hover: rgba(46, 150, 214, 0.10);
  --text-normal: #E9EDF6;
  --text-muted: #A9B4CC;
  --text-faint: #67718D;
  --text-accent: var(--spunk-azure-hi);
  --text-accent-hover: var(--spunk-green);
  --link-color: var(--spunk-azure-hi);
  --link-color-hover: var(--spunk-green);
  --link-external-color: var(--spunk-azure-hi);
  --link-external-color-hover: var(--spunk-green);
  --link-unresolved-color: var(--spunk-steel);
  --text-highlight-bg: rgba(204, 255, 0, 0.22);
  --text-selection: rgba(46, 150, 214, 0.32);
  --interactive-accent: var(--spunk-azure);
  --interactive-accent-hover: var(--spunk-azure-hi);
  --code-background: rgba(21, 28, 48, 0.85);
  --code-normal: var(--spunk-azure-soft);
  --blockquote-border-color: var(--spunk-green);
  --hr-color: var(--spunk-navy-line);
  --tag-background: rgba(204, 255, 0, 0.14);
  --tag-color: var(--spunk-green);
  --h1-color: var(--spunk-azure-soft);
  --h2-color: var(--spunk-azure-hi);
  --h3-color: var(--spunk-azure);
  --h4-color: var(--spunk-steel);
  --h5-color: var(--spunk-steel);
  --h6-color: var(--spunk-steel);
}

/* ── LIGHT — daylight at the pool ─────────────────────────── */
body.theme-light {
  --background-primary: #FBFCFE;
  --background-primary-alt: #F0F3F9;
  --background-secondary: #F0F3F9;
  --background-secondary-alt: #E4E9F3;
  --background-modifier-border: #D8DEEA;
  --background-modifier-hover: rgba(46, 150, 214, 0.08);
  --text-normal: #1C2540;
  --text-muted: #4E5977;
  --text-faint: #8B94AC;
  --text-accent: var(--spunk-azure-ink);
  --text-accent-hover: var(--spunk-green-ink);
  --link-color: var(--spunk-azure-ink);
  --link-color-hover: var(--spunk-green-ink);
  --link-external-color: var(--spunk-azure-ink);
  --link-external-color-hover: var(--spunk-green-ink);
  --text-highlight-bg: rgba(204, 255, 0, 0.45);
  --text-selection: rgba(46, 150, 214, 0.20);
  --interactive-accent: var(--spunk-azure);
  --interactive-accent-hover: var(--spunk-azure-ink);
  --code-background: #EEF2F8;
  --blockquote-border-color: #A9CC00;
  --hr-color: #D8DEEA;
  --tag-background: rgba(204, 255, 0, 0.35);
  --tag-color: #45560A;
  --h1-color: var(--spunk-navy);
  --h2-color: #1E5F94;
  --h3-color: var(--spunk-azure-ink);
  --h4-color: #4E5977;
  --h5-color: #4E5977;
  --h6-color: #4E5977;
}

/* ── site chrome ──────────────────────────────────────────── */

/* site name wears the tag */
.site-body-left-column-site-name {
  color: var(--spunk-green);
  font-weight: 700;
  letter-spacing: 0.02em;
}
body.theme-light .site-body-left-column-site-name {
  color: var(--spunk-green-ink);
}

/* nav tree: hover + the collar-link on the active page */
.published-container .tree-item-self:hover {
  color: var(--text-accent);
}
.published-container .tree-item-self.is-active {
  box-shadow: inset 3px 0 0 var(--spunk-green);
  font-weight: 600;
}

/* the mohawk crest under the page title (old + new Publish DOM) */
.published-container .page-header,
.published-container .inline-title {
  position: relative;
  padding-bottom: 0.45em;
}
.published-container .page-header::after,
.published-container .inline-title::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  bottom: -0.5rem;
  width: 2.6em;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--spunk-green) 0 55%, var(--spunk-azure) 55%);
}

/* quote callouts wear the green collar on the site too */
.published-container .callout[data-callout="quote"] {
  --callout-color: 204, 255, 0;
  background: rgba(204, 255, 0, 0.06);
}
body.theme-light .published-container .callout[data-callout="quote"] {
  --callout-color: 122, 153, 0;
  background: rgba(204, 255, 0, 0.12);
}