/* ==========================================================================
   THEME — Real Bonds Online
   --------------------------------------------------------------------------
   Paint layer ONLY. Structure lives in layout.css (bento lib).
   Load order: base.css → theme.css → layout.css

   Palette:
     #F5F2EE  Parchment    — light bg / light surface
     #1A1A2E  Deep Ink     — dark text / dark bg
     #2D7A5F  Forest Bond  — primary accent / links / CTAs / toggle fill
     #C4395E  Candor Rose  — secondary accent / pull-quotes / borders / emphasis

   Only these four HEX appear in this file — exclusively inside --color-*
   definitions. Every paint declaration references var(--color-*) only (DS-17).
   ========================================================================== */

/* --- Google Fonts -------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* --- Font roles ---------------------------------------------------------- */
:root {
  --font-sans:  'DM Sans', 'Helvetica Neue', sans-serif;
  --font-serif: 'Playfair Display', 'Georgia', serif;
  --font-body:  'Source Serif 4', 'Georgia', serif;
}

/* --- Light theme --------------------------------------------------------- */
:root[data-theme="light"] {
  --color-bg:      #F5F2EE;
  --color-text:    #1A1A2E;
  --color-accent:  #2D7A5F;
  --color-surface: #F5F2EE;  /* Parchment — used as card surface in bento grid */
  --color-border:  #1A1A2E;  /* Deep Ink hairlines — editorial, deliberate */

  /* Internal tints derived through color-mix — no raw hex in paint */
  --color-accent-subtle: color-mix(in srgb, #2D7A5F 10%, #F5F2EE);
  --color-rose-subtle:   color-mix(in srgb, #C4395E  8%, #F5F2EE);
  --color-ink-subtle:    color-mix(in srgb, #1A1A2E 12%, #F5F2EE);
}

/* --- Dark theme ---------------------------------------------------------- */
:root[data-theme="dark"] {
  --color-bg:      #1A1A2E;
  --color-text:    #F5F2EE;
  --color-accent:  #2D7A5F;
  --color-surface: #1A1A2E;  /* Deep Ink — cards sit on dark ground */
  --color-border:  #F5F2EE;  /* Parchment hairlines — crisp on dark */

  /* Internal tints derived through color-mix */
  --color-accent-subtle: color-mix(in srgb, #2D7A5F 18%, #1A1A2E);
  --color-rose-subtle:   color-mix(in srgb, #C4395E 14%, #1A1A2E);
  --color-ink-subtle:    color-mix(in srgb, #F5F2EE 10%, #1A1A2E);
}

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

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

/* --- Nav paint ----------------------------------------------------------- */
/* The brand wordmark carries serif weight for literary identity */
.nav-brand {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

/* Nav links — understated, DM Sans, accent on hover */
.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.75;
  transition: opacity 0.18s ease, color 0.18s ease;
}

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

/* Header background: sticky bar gets a tinted parchment wash with a subtle
   warm backdrop blur so underlying content doesn't clash as you scroll. */
.site-header {
  background: color-mix(in srgb, var(--color-bg) 92%, var(--color-accent));
  /* DS-17: no raw hex — color-mix derives from tokens */
  border-block-end-color: color-mix(in srgb, var(--color-border) 30%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- Theme toggle + burger: Forest Bond pill (DS-12) -------------------- */
/* Restyled as a rounded pill in Forest Bond with a Parchment icon — distinct
   from the generic bordered square default in base.css. Both controls share
   the same pill treatment for visual cohesion. */
.theme-toggle,
.nav-toggle {
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: 2em;
  width: 2.75rem;
  height: 2rem;
  border: none;
  opacity: 1;
  transition: background 0.18s ease, transform 0.14s ease;
}

.theme-toggle:hover,
.nav-toggle:hover {
  background: color-mix(in srgb, var(--color-accent) 80%, var(--color-text));
  opacity: 1;
  transform: scale(1.04);
}

.theme-toggle:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .nav-toggle {
    transition: none;
  }
}

/* --- Hero paint ---------------------------------------------------------- */
/* Warm gradient wash: Parchment → subtle Forest Bond tint, with a Candor Rose
   decorative bottom rule. This is the dominant brand moment on the homepage. */
.hero {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-bg) 100%, transparent) 0%,
      color-mix(in srgb, var(--color-accent) 8%, var(--color-bg)) 55%,
      color-mix(in srgb, var(--color-bg) 94%, var(--color-text)) 100%
    );
  padding-block: var(--space-2xl);
  position: relative;
}

/* Candor Rose decorative rule below hero */
.hero::after {
  content: '';
  display: block;
  position: absolute;
  inset-block-end: 0;
  inset-inline: var(--space-md);
  height: 2px;
  background: color-mix(in srgb, var(--color-border) 20%, transparent);
}

@media (min-width: 768px) {
  .hero::after {
    inset-inline: var(--space-xl);
  }
}

/* Hero headline: editorial Playfair Display, generous and bold */
.hero__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

/* Hero lead: Forest Bond through layout.css's var(--color-accent) override —
   reinforce weight in DM Sans */
.hero__lead {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-accent);
}

/* --- Section titles ------------------------------------------------------ */
/* Override layout.css's --font-sans assignment to the brand's serif for h2 */
.section-title,
.page-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.015em;
  color: var(--color-text);
  /* Candor Rose underline accent — brand's secondary color, always visible */
  border-block-end: 2px solid color-mix(in srgb, var(--color-border) 100%, transparent);
  padding-block-end: var(--space-xs);
  display: inline-block;
}

/* Candor Rose accent mark before section titles */
.section-title::before,
.page-title::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.875em;
  margin-inline-end: 0.5rem;
  background: color-mix(in srgb, var(--color-accent) 60%, var(--color-text));
  vertical-align: -0.1em;
  border-radius: 1px;
}

/* --- Bento card paint ---------------------------------------------------- */
/* Cards use bento's structural padding/border-radius; we paint:
   - warm surface tint on the card face
   - Candor Rose left-border accent for editorial richness (DS-2: all 4 visible)
   - Restrained hover shadow that stays WITHIN the card box (no gap bleed)
     The bento grid gap is --space-md (24px); translateY(-4px) moves the card
     up 4px into the gap. Box-shadow spread is capped so it reads as belonging
     to the card, not bleeding through the gap into adjacent cells. */
.article-card {
  background: color-mix(in srgb, var(--color-surface) 100%, transparent);
  border-color: color-mix(in srgb, var(--color-border) 22%, transparent);
  border-left-width: 3px;
  border-left-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-left-color 0.22s ease;
}

.article-card:hover {
  /* Shadow spread 8px — well within the card's own box at 4px lift.
     The --space-md (24px) gap means adjacent content is ≥20px away,
     so a 10px spread would still not bleed. We use 8px to be conservative. */
  box-shadow:
    0 4px 8px color-mix(in srgb, var(--color-text) 10%, transparent),
    0 1px 2px color-mix(in srgb, var(--color-text) 8%, transparent);
  border-left-color: color-mix(in srgb, var(--color-accent) 100%, transparent);
}

.article-card__title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--leading-snug);
}

/* NOTE: .article-card__link::after is NOT touched here — layout.css owns the
   "→" arrow via content: " →". Adding position/inset here would pin the arrow
   to the card corner (known conflict documented in design-system). */
.article-card__link {
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 600;
  transition: color 0.18s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .article-card {
    transition: border-left-color 0.01ms;
  }
}

/* --- Articles section wrapper on homepage -------------------------------- */
.articles-section {
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .articles-section {
    padding-inline: var(--space-xl);
  }
}

/* Decorative Candor Rose rule above the articles section on homepage */
.articles-section::before {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: color-mix(in srgb, var(--color-accent) 100%, transparent);
  margin-block-end: var(--space-xl);
  border-radius: 2px;
}

/* --- Articles list page (articles.html) ---------------------------------- */
.article-list__item {
  background: color-mix(in srgb, var(--color-surface) 100%, transparent);
  border-color: color-mix(in srgb, var(--color-border) 22%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  transition: border-left-color 0.18s ease;
}

.article-list__item:hover {
  border-left-color: color-mix(in srgb, var(--color-accent) 100%, transparent);
}

.article-list__link {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
  transition: color 0.18s ease;
}

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

/* Page hero (articles.html + article pages) — warm tinted band */
.page-hero {
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
  padding-inline: var(--space-md);
  border-block-end: 1px solid color-mix(in srgb, var(--color-border) 18%, transparent);
}

@media (min-width: 768px) {
  .page-hero {
    padding-inline: var(--space-xl);
  }
}

.page-title {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

/* --- Prose / article body ----------------------------------------------- */
/* DS-6: .prose h1 must be overridden from base.css's --text-4xl to a
   readable size in a narrow reading column. */
.prose h1 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-style: italic;
  color: var(--color-text);
  letter-spacing: -0.02em;
  font-size: var(--text-2xl);
}

@media (min-width: 768px) {
  .prose h1 {
    font-size: var(--text-3xl);
  }
}

/* Prose headings — Playfair for h2/h3, DM Sans for h4/h5 (hierarchy) */
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  color: var(--color-text);
  letter-spacing: -0.01em;
  /* Candor Rose left-rule before h2 for editorial pull-quote feel */
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.prose h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
}

.prose h4,
.prose h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: var(--color-accent);
}

/* Prose body copy — Source Serif 4 for warm literary reading */
.prose p {
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

/* Prose links — accent color with animated underline */
.prose a {
  color: var(--color-accent);
  text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  transition: text-decoration-color 0.18s ease;
}

.prose a:hover {
  text-decoration-color: var(--color-accent);
}

/* Pull-quote treatment: blockquote uses Candor Rose accent */
.prose blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text);
  border-inline-start: 4px solid color-mix(in srgb, var(--color-accent) 100%, transparent);
  padding-inline-start: var(--space-lg);
  margin-inline: 0;
  opacity: 0.9;
}

/* --- Articles index container ------------------------------------------- */
.articles-index {
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .articles-index {
    padding-inline: var(--space-xl);
  }
}

/* --- Footer paint -------------------------------------------------------- */
.site-footer {
  background: color-mix(in srgb, var(--color-text) 96%, var(--color-bg));
  color: var(--color-bg);
  border-block-start-color: color-mix(in srgb, var(--color-border) 20%, transparent);
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .site-footer {
    padding-inline: var(--space-xl);
  }
}

/* Footer nav links — inverted on the dark footer */
.site-footer .nav-links a,
.site-footer a {
  color: var(--color-bg);
  opacity: 0.7;
  transition: opacity 0.18s ease;
}

.site-footer .nav-links a:hover,
.site-footer a:hover {
  opacity: 1;
  color: var(--color-bg);
}

.footer-copy {
  font-family: var(--font-sans);
  font-weight: 400;
  opacity: 0.6;
  letter-spacing: 0.01em;
}

/* Footer brand wordmark in the footer */
.site-footer .nav-brand {
  color: var(--color-bg);
  font-size: var(--text-lg);
}

/* Decorative Forest Bond accent rule in the footer */
.site-footer::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-accent);
  margin-block-end: var(--space-md);
  border-radius: 2px;
}

/* --- Dark theme footer override ------------------------------------------ */
/* In dark mode the footer uses a slightly lighter deep surface so it doesn't
   disappear into the page background */
:root[data-theme="dark"] .site-footer {
  background: color-mix(in srgb, var(--color-bg) 80%, var(--color-border));
  color: var(--color-text);
}

:root[data-theme="dark"] .site-footer .nav-brand,
:root[data-theme="dark"] .site-footer .nav-links a,
:root[data-theme="dark"] .site-footer a {
  color: var(--color-text);
}

:root[data-theme="dark"] .site-footer .nav-links a:hover,
:root[data-theme="dark"] .site-footer a:hover {
  color: var(--color-accent);
  opacity: 1;
}

/* --- Dark theme card + section overrides --------------------------------- */
/* Dark mode cards: slightly elevated surface to distinguish from bg */
:root[data-theme="dark"] .article-card {
  background: color-mix(in srgb, var(--color-surface) 100%, transparent);
  border-color: color-mix(in srgb, var(--color-border) 12%, transparent);
}

:root[data-theme="dark"] .article-list__item {
  background: color-mix(in srgb, var(--color-surface) 100%, transparent);
  border-color: color-mix(in srgb, var(--color-border) 12%, transparent);
}

/* Dark hero gradient: inky deep to a faint Forest Bond shimmer */
:root[data-theme="dark"] .hero {
  background:
    linear-gradient(
      160deg,
      var(--color-bg) 0%,
      color-mix(in srgb, var(--color-accent) 12%, var(--color-bg)) 55%,
      color-mix(in srgb, var(--color-bg) 94%, var(--color-border)) 100%
    );
}

/* Dark page-hero band */
:root[data-theme="dark"] .page-hero {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
}

/* Dark header: deeper tint with slight accent wash */
:root[data-theme="dark"] .site-header {
  background: color-mix(in srgb, var(--color-bg) 94%, var(--color-accent));
  border-block-end-color: color-mix(in srgb, var(--color-border) 12%, transparent);
}

/* Dark prose h2 border */
:root[data-theme="dark"] .prose h2 {
  border-inline-start-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

/* Dark blockquote: rose accent retained */
:root[data-theme="dark"] .prose blockquote {
  border-inline-start-color: color-mix(in srgb, var(--color-accent) 80%, transparent);
}

/* --- Motion safety (DS-5) ----------------------------------------------- */
/* base.css already applies the blanket transition kill under reduce; these
   reinforce for any transitions we explicitly set. */
@media (prefers-reduced-motion: reduce) {
  .article-card,
  .article-list__item,
  .nav-links a,
  .article-card__link,
  .article-list__link,
  .prose a {
    transition: none;
  }
}