/* Meridian — cool off-white with a modern indigo accent, clean and neutral.
   A worked example: one webfont, from Bunny, used for the whole site.
   rev 2026-08-03
   Font: Manrope via Bunny Fonts, requested only when this theme is picked.
   Self-host or use Google instead: see "Font family" in the guide's Tips page.

   ─── How this file is put together (read top to bottom) ───────────────────
   1. The @import below names one font from a privacy-respecting CDN. OwnShip
      holds this request back until a visitor actually selects Meridian — an
      @import inside a _theme-*.css is deferred; a <link> in _header.md is not.
   2. The [data-theme="meridian"] block sets the palette. The selector MUST
      equal this file's name stem ("meridian"), or the theme styles nothing.
   3. One rule on `body` swaps the font for the entire site (see below).
   Copy this file, rename it and its selector together, change the font slug
   and the colours, and you have a new theme. */

@import url('https://fonts.bunny.net/css?family=manrope:400,600,700&display=swap');

/* The palette. These thirteen custom properties are the whole theme contract —
   OwnShip reads them for every surface (nav, header, links, code, active row).
   Set all of them; sparse palettes fall back to the built-in theme underneath. */
[data-theme="meridian"] {
  --theme-icon: "🧭";   /* shown in the theme menu */
  --bg:         #fbfbfd; /* page background          */
  --bg-nav:     #f3f4f8; /* nav / sidebar background */
  --bg-code:    #eceef4; /* code + inline-code fill  */
  --border:     #dcdfe8; /* hairlines and rules      */
  --text:       #1a1d24; /* body text                */
  --text-muted: #5b6270; /* nav labels, meta, muted  */
  --heading:    #0d0f14; /* h1–h6                    */
  --link:       #4f46e5; /* links, accents           */
  --link-hover: #3a32c4; /* link hover               */
  --active-bg:  #e9e8fb; /* active nav row fill      */
  --active:     #3a32c4; /* active nav row text      */
  --head-bg:    #f3f4f8; /* site header band         */
}

/* The whole point of this example. Setting font-family on `body` restyles the
   ENTIRE site — headings, nav, header, footer, prose — because every element
   inherits it. No per-element rules needed; one line does all of it. The last
   entries are the system fallback the browser uses until Manrope arrives. */
[data-theme="meridian"] body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* The one deliberate exception: code stays fixed-width, so listings and
   indentation line up. Delete these two lines if you truly want Manrope
   everywhere, code included. */
[data-theme="meridian"] code,
[data-theme="meridian"] pre {
  font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

/* Optional polish — a modern sans reads a touch cleaner with slightly tighter
   heading tracking. Nothing structural; remove it and the theme still works. */
[data-theme="meridian"] main h1,
[data-theme="meridian"] main h2,
[data-theme="meridian"] main h3 {
  letter-spacing: -0.015em;
}