/* ==========================================================================
   Heart Route — theme.css (PAINT LAYER ONLY)
   Layout lib: "swiss" (type-led, numbered index, hairline rules, no boxes).
   This file paints colour + fonts + accent flourishes on top of base.css +
   layout.css. It authors NO structure (no grid/flex/structural spacing).

   Type pairing (DS-6, distinctive — never Inter/Roboto/Arial/system-ui):
     --font-sans  → "Fraunces"      = the DISPLAY serif (layout routes every
                                       title/hero/nav-brand to var(--font-sans))
     --font-serif → "Space Grotesk" = the BODY/UI grotesque (set on .page)
   Cartographic-editorial: a literary serif headline over a clean technical
   grotesque read, the teal as the "marked route", rose as the heart signal.

   Palette (DS-2) — only these 4 HEX, spelled ONLY in --color-* token defs;
   surface/border are derived with color-mix(var(...)) so they theme-flip and
   add zero new hex:
     #F3F6F8 Sea Mist · #13212B Deep Harbor · #0E9C90 Wayfinder Teal · #E23B79 Signal Rose
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  --font-sans:  "Fraunces", Georgia, "Times New Roman", serif;        /* display face */
  --font-serif: "Space Grotesk", "Trebuchet MS", sans-serif;          /* body / UI face */
}

:root[data-theme="light"] {
  --color-bg:      #F3F6F8;  /* Sea Mist */
  --color-text:    #13212B;  /* Deep Harbor */
  --color-accent:  #0E9C90;  /* Wayfinder Teal */
  --color-rose:    #E23B79;  /* Signal Rose */
  --color-surface: color-mix(in srgb, var(--color-text) 6%, var(--color-bg));
  --color-border:  color-mix(in srgb, var(--color-text) 16%, var(--color-bg));
}

:root[data-theme="dark"] {
  --color-bg:      #13212B;  /* Deep Harbor ground */
  --color-text:    #F3F6F8;  /* Sea Mist ink */
  --color-accent:  #0E9C90;  /* Wayfinder Teal — shared brand accent */
  --color-rose:    #E23B79;  /* Signal Rose — shared */
  --color-surface: color-mix(in srgb, var(--color-text) 10%, var(--color-bg));
  --color-border:  color-mix(in srgb, var(--color-text) 22%, var(--color-bg));
}

/* --- Page paint --------------------------------------------------------- */
body {
  font-family: var(--font-serif);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.page {
  background-color: var(--color-bg);
  color: var(--color-text);
  /* faint cartographic contour wash — CSS-only texture (DS-3), theme-aware */
  background-image:
    radial-gradient(120% 90% at 100% -10%, color-mix(in srgb, var(--color-rose) 7%, transparent), transparent 58%),
    radial-gradient(110% 80% at -10% 0%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

::selection {
  background-color: color-mix(in srgb, var(--color-rose) 30%, transparent);
  color: var(--color-text);
}

/* --- Header / nav ------------------------------------------------------- */
.site-header {
  background-color: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border-block-start: 3px solid var(--color-accent);   /* the route line at the top edge */
}

.nav-brand {
  color: var(--color-text);
}

.nav-brand:hover {
  color: var(--color-accent);
}

.nav-links a {
  color: color-mix(in srgb, var(--color-text) 78%, var(--color-bg));
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--color-rose);   /* heart-signal on hover */
}

/* Toggle + burger: brand pill shape, not the default bordered square (DS-12) */
.theme-toggle,
.nav-toggle {
  border-radius: 999px;
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover,
.nav-toggle:hover {
  background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-color: var(--color-accent);
  color: var(--color-accent);
  opacity: 1;
}

/* --- Hero --------------------------------------------------------------- */
.hero__title {
  color: var(--color-text);
}

.hero__lead {
  color: color-mix(in srgb, var(--color-text) 82%, var(--color-bg));  /* high-contrast body tone, NOT an accent tint */
}

/* --- Section / page titles (the hairline rule reads as a contour line) --- */
.section-title,
.page-title {
  color: var(--color-accent);
  border-block-end-color: var(--color-accent);
}

/* --- Numbered index (swiss) -------------------------------------------- */
.articles-grid,
.article-list {
  border-block-start: var(--border-width) solid var(--color-border);
}

.article-card,
.article-list__item {
  border-block-end-color: var(--color-border);
  transition: border-color 0.25s ease;
}

.article-card:hover,
.article-list__item:hover {
  border-block-end-color: var(--color-rose);   /* the row you're on lights up rose */
  background-color: color-mix(in srgb, var(--color-accent) 5%, transparent);  /* faint route wash, stays inside the row box */
}

.article-card::before,
.article-list__item::before {
  color: var(--color-accent);   /* leading-zero route numerals in teal */
}

.article-card__link,
.article-list__link {
  color: var(--color-text);
  transition: color 0.2s ease;
}

.article-card__link:hover,
.article-list__link:hover {
  color: var(--color-accent);
}

/* --- Article prose ------------------------------------------------------ */
.prose {
  color: var(--color-text);
}

.prose h1 {
  color: var(--color-text);
  font-size: var(--text-2xl);   /* DS-6: tame the base --text-4xl in a narrow column (mobile ~h3) */
}

.prose :is(h2, h3) {
  color: var(--color-text);
}

.prose :is(h2, h3)::before {
  content: "";
  display: inline-block;
  width: 1.4ch;
  height: 0.12em;
  margin-inline-end: 0.6ch;
  vertical-align: middle;
  background-color: var(--color-accent);   /* a small route tick before each heading */
}

.prose a {
  color: var(--color-accent);
  text-decoration-color: var(--color-rose);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease;
}

.prose a:hover {
  color: var(--color-rose);
}

.prose blockquote {
  border-inline-start: 3px solid var(--color-rose);
  padding-inline-start: var(--space-md);
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-bg));
  font-style: italic;
}

.prose strong {
  color: var(--color-text);
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  border-block-start-color: var(--color-accent);
  background-color: var(--color-surface);
}

.footer-copy {
  color: color-mix(in srgb, var(--color-text) 70%, var(--color-bg));
}

.footer-copy a {
  color: var(--color-accent);
}

/* --- Responsive paint --------------------------------------------------- */
@media (min-width: 768px) {
  .prose h1 {
    font-size: var(--text-3xl);   /* desktop ~h2 weight */
  }
}