/* ==========================================================================
   THEME — Aspenwood Labs
   --------------------------------------------------------------------------
   Paint layer only. Structure (grid/flex/spacing) belongs to layout.css
   ("editorial" lib) and base.css — this file supplies fonts, the dual-theme
   color contract, and accent flourishes on the shared class API.
   ========================================================================== */

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

:root {
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Source Sans 3", "Seravek", Georgia, sans-serif;
}

/* --- Color contract ------------------------------------------------------ */
:root[data-theme="light"] {
  --color-bg: #FAF8F3;       /* Birch Paper */
  --color-text: #23281F;     /* Deep Forest Ink */
  --color-accent: #2F6B4F;   /* Aspen Grove */
  --color-surface: #FFFFFF;  /* Pure Canvas */
  --color-border: color-mix(in srgb, #23281F 16%, transparent);
}

:root[data-theme="dark"] {
  --color-bg: #23281F;       /* Deep Forest Ink as dark bg */
  --color-text: #FAF8F3;     /* Birch Paper as light text */
  /* Aspen Grove measured ~3.7:1 against this bg at the old 80/20 mix — fails
     AA for body-size accent text (card/list titles). Lifted to 65/35 (still
     the one shared brand accent, just a lighter tint) to clear ~4.9:1. */
  --color-accent: color-mix(in srgb, #2F6B4F 65%, #FAF8F3 35%);
  --color-surface: color-mix(in srgb, #FAF8F3 7%, #23281F);
  --color-border: color-mix(in srgb, #FAF8F3 20%, transparent);
}

/* --- Page paint ----------------------------------------------------------- */
.page {
  background: var(--color-bg);
  color: var(--color-text);
}

body {
  font-family: var(--font-sans);
}

a {
  color: var(--color-accent);
  text-decoration-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
a:hover {
  text-decoration-color: var(--color-accent);
}

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

/* --- Header / masthead ----------------------------------------------------- */
.site-header {
  background: var(--color-bg);
  border-block-end-color: var(--color-border);
}

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

.nav-links a {
  color: var(--color-text);
}
.nav-links a:hover {
  color: var(--color-accent);
}

/* --- Theme toggle + burger: brand-specific shape, not a bordered square --- */
.theme-toggle {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 999px; /* pill */
  color: var(--color-accent);
}
.theme-toggle:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-color: var(--color-accent);
}

.nav-toggle {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  background: transparent;
}
.nav-toggle:hover {
  opacity: 1;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 60%),
    var(--color-bg);
  border-block-end-color: var(--color-border);
  position: relative;
}
.hero::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-inline: auto;
  margin-block-end: var(--space-md);
  background: var(--color-accent);
}

.hero__title {
  color: var(--color-text);
  /* "Aspenwoodlabs.com" is one unbroken word; at mobile widths the default
     overflow-wrap:break-word (base.css) can split it at an arbitrary byte
     boundary ("Aspenwoodla / bs.com"). Let the browser hyphenate at a real
     syllable boundary instead when it must break. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
}

/* Higher specificity than layout.css's bare `.hero__lead { color: accent }`
   (same source order would otherwise let that win and tint the lead
   accent-green at 0.82 opacity — ~4:1 light / ~2.9:1 dark, failing AA body
   contrast). Keep the lead on --color-text; reserve accent for the kicker
   rule above it and for links. */
.hero .hero__lead {
  color: var(--color-text);
  opacity: 0.82;
}

/* --- Section titles / page hero -------------------------------------------- */
.section-title,
.page-title {
  color: var(--color-text);
  position: relative;
}

.page-hero {
  border-block-end: var(--border-width) solid var(--color-border);
}

/* --- Article cards (homepage) ----------------------------------------------- */
.article-card {
  border-block-start-color: var(--color-border);
  transition: background-color 0.2s ease, padding-inline 0.2s ease;
}
.article-card:last-child {
  border-block-end-color: var(--color-border);
}
.article-card:hover {
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  padding-inline: var(--space-sm);
}

.article-card__title {
  color: var(--color-text);
}

.article-card__link:hover {
  color: var(--color-accent);
}
/* NOTE: .article-card__link::after is owned by layout.css (the " \2192" arrow
   indicator). Do not set position/inset on it here — see design-system's
   known-conflict note. */

/* --- Article list page ------------------------------------------------------- */
.article-list__item {
  border-block-start-color: var(--color-border);
}
.article-list__item:last-child {
  border-block-end-color: var(--color-border);
}
.article-list__item::before {
  color: var(--color-accent);
}

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

/* --- Article body / prose ----------------------------------------------------- */
.prose {
  color: var(--color-text);
}
.prose h1 {
  font-size: var(--text-2xl); /* mobile: ~h3 visual weight */
  color: var(--color-text);
}
@media (min-width: 768px) {
  .prose h1 {
    font-size: var(--text-3xl); /* desktop: ~h2 visual weight */
  }
}
.prose :is(h2, h3, h4) {
  color: var(--color-text);
}
.prose h2 {
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block-start: var(--space-md);
}
.prose a {
  color: var(--color-accent);
}
.prose blockquote {
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: var(--space-md);
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  font-style: italic;
}
.prose strong {
  color: var(--color-text);
}

/* --- Footer ------------------------------------------------------------------- */
.site-footer {
  border-block-start-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.footer-copy {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* --- Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .article-card {
    transition: none;
  }
}