/* ==========================================================================
   publish.css  ·  louisebeattie.com
   Forge & Flourish visual identity → Obsidian Publish
   v1.3 · 2026-07-02  (light + dark applications)
   --------------------------------------------------------------------------
   Palette + typography from the F&F brand visual identity.
   Light application = warm-white base, Charcoal text (the brand default).
   Dark application  = Charcoal base, warm off-white text ("evening wear").
   Libre Baskerville headings / Spectral body throughout.

   HOW TO USE: place in the ROOT of the Garden vault and publish it from the
   Publish changes dialog. (With "Detect all file extensions" on, it shows in
   the explorer.) Refresh the site; hard-refresh / purge Cloudflare if the old
   styling lingers (or leave Cloudflare Development Mode on while iterating).
   ========================================================================== */

/* --- Fonts — @import MUST stay at the very top ------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ==========================================================================
   1. Brand palette tokens + fonts + type size  (theme-agnostic, on body)
   ========================================================================== */
body {
  /* palette */
  --bone:          #F3EFEA;
  --charcoal:      #1E1E1E;
  --deep-slate:    #2C2C2C;
  --rose-maroon:   #B03060;
  --forge-copper:  #B87333;
  --deep-teal:     #2A5F5F;
  --sage:          #D8E0D5;
  --warm-stone:    #A09890;
  --rich-gold:     #B8965C;
  --warm-grey:     #6B655E;
  --hairline:      #E2DACF;

  /* fonts */
  --font-text-theme:       'Spectral', 'Open Sans', serif;
  --font-interface-theme:  'Spectral', 'Open Sans', sans-serif;
  --font-monospace-theme:  'SFMono-Regular', ui-monospace, 'Menlo', monospace;
  --font-text-size:        18px;   /* brand spec 16px; 18px reads better on screen */
}

/* ==========================================================================
   2. LIGHT application (default)
   ========================================================================== */
body {
  --background-primary:      #FCFBF8;   /* warm near-white reading surface */
  --background-primary-alt:  #F1ECE4;
  --background-secondary:    #F1ECE4;   /* sidebar */
  --background-secondary-alt: #F1ECE4;

  --text-normal: var(--charcoal);
  --text-muted:  var(--warm-grey);
  --text-faint:  var(--warm-stone);
  --bold-color:  var(--charcoal);

  --text-accent:              var(--forge-copper);
  --text-accent-hover:        var(--deep-teal);
  --interactive-accent:       var(--forge-copper);
  --interactive-accent-hover: var(--deep-teal);
  --link-color:               var(--forge-copper);
  --link-color-hover:         var(--deep-teal);

  --text-selection: rgba(216, 224, 213, 0.7);

  --h1-color: var(--charcoal);
  --h2-color: var(--charcoal);
  --h3-color: var(--deep-teal);
  --h4-color: var(--charcoal);
  --h5-color: var(--charcoal);
  --h6-color: var(--warm-grey);
  --heading-formatting: var(--warm-stone);

  --blockquote-border-color: var(--forge-copper);
  --blockquote-bg: rgba(216, 224, 213, 0.35);
  --code-background: #ECE6DE;
  --code-normal:     var(--deep-slate);
  --hr-color:        var(--hairline);
}

.published-container {
  /* layout dims (theme-agnostic) — --page-width is your column dial:
     44rem ~700px · 52rem ~830px (current) · 60rem ~960px (wide). */
  --page-width:   52rem;
  --page-padding: 2.5rem;

  --page-title-font:        'Libre Baskerville', Georgia, serif;
  --page-title-size:        2.4rem;
  --page-title-weight:      700;
  --page-title-line-height: 1.2;
  --page-title-style:       normal;

  /* LIGHT nav + title colour (defaults) */
  --page-title-color:             var(--charcoal);
  --nav-parent-item-color:        var(--charcoal);
  --nav-parent-item-color-active: var(--rose-maroon);
  --nav-parent-item-weight:       700;
  --nav-item-color:               var(--warm-grey);
  --nav-item-color-hover:         var(--forge-copper);
  --nav-item-color-active:        var(--rose-maroon);
  --nav-item-weight-active:       600;
  --nav-item-border-color-active: var(--rose-maroon);
  --nav-collapse-icon-color:       var(--warm-stone);
  --nav-collapse-icon-color-hover: var(--forge-copper);
}

/* ==========================================================================
   3. DARK application ("the brand in evening wear")
   ========================================================================== */
.theme-dark {
  --background-primary:      #1E1E1E;   /* Charcoal base */
  --background-primary-alt:  #26231F;
  --background-secondary:    #26231F;   /* sidebar */
  --background-secondary-alt: #26231F;

  --text-normal: #EDE7DD;   /* warm off-white */
  --text-muted:  #ADA599;
  --text-faint:  #7E766B;
  --bold-color:  #F6F1E8;

  --text-accent:              #CC8F4E;  /* copper, brightened for dark contrast */
  --text-accent-hover:        #7BB0A6;  /* teal, brightened */
  --interactive-accent:       #CC8F4E;
  --interactive-accent-hover: #7BB0A6;
  --link-color:               #CC8F4E;
  --link-color-hover:         #7BB0A6;

  --text-selection: rgba(184, 115, 51, 0.25);

  --h1-color: #EDE7DD;
  --h2-color: #EDE7DD;
  --h3-color: #7BB0A6;
  --h4-color: #EDE7DD;
  --h5-color: #EDE7DD;
  --h6-color: #ADA599;
  --heading-formatting: #7E766B;

  --blockquote-border-color: #CC8F4E;
  --blockquote-bg: rgba(216, 224, 213, 0.06);
  --code-background: #2A2723;
  --code-normal:     #EDE7DD;
  --hr-color:        #3A352E;
}

/* DARK nav + title colour (higher specificity, overrides the light defaults;
   two selectors cover the theme class being on an ancestor OR the container) */
.theme-dark .published-container,
.published-container.theme-dark {
  --page-title-color:             #F3EFEA;
  --nav-parent-item-color:        #EDE7DD;
  --nav-parent-item-color-active: #D46A8E;   /* rose-maroon, brightened */
  --nav-item-color:               #ADA599;
  --nav-item-color-hover:         #CC8F4E;
  --nav-item-color-active:        #D46A8E;
  --nav-item-border-color-active: #D46A8E;
  --nav-collapse-icon-color:       #7E766B;
  --nav-collapse-icon-color-hover: #CC8F4E;
}

/* ==========================================================================
   4. Typography (selectors, theme-agnostic)
   ========================================================================== */
.markdown-preview-view h1, .markdown-rendered h1,
.markdown-preview-view h2, .markdown-rendered h2,
.markdown-preview-view h3, .markdown-rendered h3,
.markdown-preview-view h4, .markdown-rendered h4,
.markdown-preview-view h5, .markdown-rendered h5,
.markdown-preview-view h6, .markdown-rendered h6 {
  font-family: 'Libre Baskerville', Georgia, serif;
  letter-spacing: 0.1px;
}

/* Site header — Forge & Flourish logo above the wordmark.
   If this doesn't catch, Inspect the sidebar title and confirm the selector. */
.site-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--text-normal);
}
.site-name::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  background-image: url("https://assets.louisebeattie.com/forge-flourish-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Right-sidebar section labels ("INTERACTIVE GRAPH" / "ON THIS PAGE") —
   tinted to Deep Teal (brightened in dark) to sit with the brand palette */
.published-section-header {
  color: var(--deep-teal);
  letter-spacing: 0.08em;
}
.theme-dark .published-section-header {
  color: #7BB0A6;
}

.markdown-preview-view, .markdown-rendered {
  font-family: 'Spectral', 'Open Sans', serif;
  line-height: 1.7;
}

/* Heading rhythm — a little more air above section headings */
.markdown-preview-view h2, .markdown-rendered h2 { margin-top: 2.2em; }
.markdown-preview-view h3, .markdown-rendered h3 { margin-top: 1.6em; }

/* ==========================================================================
   5. Images
   ========================================================================== */
.markdown-preview-view img,
.markdown-rendered img {
  max-width: 100%;
  border-radius: 6px;
}
/* CRISPNESS: main lever is source size — export heroes ~2x column width
   (~1400-1600px), NOT 2800px+ (a big image downscaled ~4x renders soft). */

/* ==========================================================================
   6. Blockquotes, rules, links, callouts (use theme vars → adapt automatically)
   ========================================================================== */
.markdown-preview-view blockquote,
.markdown-rendered blockquote {
  background: var(--blockquote-bg);
  border-left: 3px solid var(--blockquote-border-color);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

.markdown-preview-view hr,
.markdown-rendered hr {
  border: none;
  border-top: 1px solid var(--hr-color);
}

.markdown-preview-view a.internal-link,
.markdown-preview-view a.external-link,
.markdown-rendered a.internal-link,
.markdown-rendered a.external-link {
  text-decoration: none;
  border-bottom: 1px solid var(--text-accent);
  border-bottom-color: color-mix(in srgb, var(--text-accent) 40%, transparent);
}
.markdown-preview-view a:hover,
.markdown-rendered a:hover {
  color: var(--text-accent-hover);
  border-bottom-color: var(--text-accent-hover);
}

.markdown-preview-view .callout,
.markdown-rendered .callout {
  border-radius: 8px;
  --callout-color: 184, 115, 51;                 /* default: Forge Copper */
}
.callout[data-callout="note"],
.callout[data-callout="info"],
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"]      { --callout-color: 42, 95, 95; }    /* Deep Teal */
.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"],
.callout[data-callout="question"],
.callout[data-callout="help"],
.callout[data-callout="faq"]       { --callout-color: 184, 150, 92; }  /* Rich Gold */
.callout[data-callout="important"],
.callout[data-callout="danger"],
.callout[data-callout="error"],
.callout[data-callout="failure"],
.callout[data-callout="bug"]       { --callout-color: 176, 48, 96; }   /* Rose-Maroon */
.callout[data-callout="quote"],
.callout[data-callout="cite"]      { --callout-color: 160, 152, 144; } /* Warm Stone */

/* ==========================================================================
   NOTES / TODO
   - Custom callout types (computer/inbox/flame/robot): port from the
     .obsidian Nick Milo snippet if you use them on the site.
   ========================================================================== */