/* ==========================================================================
   THEME — heart-to-heart-online
   --------------------------------------------------------------------------
   Paint layer ONLY. Structure lives in layout.css (swiss) + base.css.
   This file: Google Fonts import, dual-theme --color-* contract, font roles,
   accent flourishes on the swiss typographic index, hover states, motion.

   Palette (DS-2):
     Parchment  #FDF6EF  light bg / warm off-white
     Ink        #1C1510  text / dark bg
     Rose       #B03A6E  primary accent — links, numerals, CTAs
     Sage       #2F7A6B  secondary accent — metadata, tags, supporting UI

   Raw hex appears ONLY inside :root[data-theme] token definitions (DS-17).
   Every paint declaration drives color through var(--color-*) (DS-17).
   Each selector is authored ONCE at the top level; variants live in @media
   or :root[data-theme="dark"] descendants (DS-18).
   ========================================================================== */

/* --- Web fonts ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;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,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

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

/* --- Light theme ---------------------------------------------------------- */
:root[data-theme="light"] {
  --color-bg:      #FDF6EF;
  --color-text:    #1C1510;
  --color-accent:  #B03A6E;
  --color-surface: #F5EDE2;   /* warm parchment tint — derived in-palette */
  --color-border:  #1C1510;   /* ink hairlines (swiss uses border as structure) */
  --color-sage:    #2F7A6B;   /* secondary accent — section marks, metadata */
}

/* --- Dark theme ----------------------------------------------------------- */
:root[data-theme="dark"] {
  --color-bg:      #1C1510;
  --color-text:    #FDF6EF;
  --color-accent:  #B03A6E;   /* brand rose — same across themes (DS-1) */
  --color-surface: #2A1E17;   /* lifted dark warm surface — ink-adjacent */
  --color-border:  #FDF6EF;   /* parchment hairlines on dark bg */
  --color-sage:    #2F7A6B;   /* secondary accent — same across themes */
}

/* --- Page ground ---------------------------------------------------------- */
.page {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* --- Site header ---------------------------------------------------------- */
/* Swiss: header bottom border already uses --color-text via layout.css.
   Add a warm background tint so the nav sits on surface, not raw bg. */
.site-header {
  background: var(--color-bg);
}

/* --- Nav brand ------------------------------------------------------------ */
/* Painted in accent rose — the wordmark as typographic mark. */
.nav-brand {
  color: var(--color-accent);
  letter-spacing: -0.03em;
}

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

/* --- Nav links ------------------------------------------------------------ */
.nav-links a {
  position: relative;
  color: var(--color-text);
  transition: color 0.18s ease;
}

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

/* --- Theme toggle + burger — pill shape (DS-12) -------------------------- */
/* Dev prompt: small pill controls in the rose accent, borderless. */
.theme-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  transition: background 0.18s ease, color 0.18s ease;
}

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

.nav-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  transition: background 0.18s ease, color 0.18s ease;
}

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

/* --- Hero ----------------------------------------------------------------- */
/* Parchment field with a very subtle sage-tinted top rule for vertical anchor.
   layout.css already sets all padding-block — we only add paint. */
.hero {
  background: var(--color-bg);
  border-block-start: 3px solid var(--color-accent);
}

.hero__title {
  font-family: var(--font-serif);
  color: var(--color-text);
}

/* Decorative rose accent mark before the hero title — typographic texture */
.hero__title::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--color-accent);
  margin-block-end: var(--space-md);
}

.hero__lead {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text);
  opacity: 0.85;
}

/* --- Section label (swiss: small-caps letterspaced rule) ------------------ */
/* layout.css already sets font-size, text-transform, letter-spacing, border.
   We only add the accent color for the rule and a sage kicker. */
.section-title,
.page-title {
  color: var(--color-text);
}

/* Sage bar above the section label — the secondary accent made visible on
   every section heading, forming a two-color mark with the rose numerals. */
.section-title::before,
.page-title::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-sage);
  margin-block-end: var(--space-xs);
}

/* --- Article cards (numbered index rows) --------------------------------- */
/* Swiss: no boxes, just hairline rows. layout.css sets border-block-end.
   We paint text colors and the hover transition on the title link. */
.article-card {
  background: transparent;
  transition: background 0.18s ease;
}

/* Numeral color: rose accent — already set by layout.css via --color-accent.
   Reinforce: no extra rule needed, token does the work. */

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

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

/* Hover: slide the title to rose, keep the numeral in place — contained,
   no transform that could bleed into the hairline gap (swiss has no box). */
.article-card__link:hover {
  color: var(--color-accent);
}

/* NOTE: .article-card__link::after is left intentionally untouched — layout.css
   uses it for the arrow indicator and theme.css must not set position/inset on it
   (per design-system conflict note). */

/* --- Articles list page --------------------------------------------------- */
.articles-index {
  background: var(--color-bg);
}

.article-list__item {
  background: transparent;
}

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

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

/* --- Prose (article body) ------------------------------------------------- */
/* DS-6: override h1 to a readable article-title size (--text-4xl is too large
   for a narrow reading column). */
.prose h1 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-text);
}

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

/* Subheadings in articles: serif, accented top border for section rhythm */
.prose h2 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-text);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
}

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

/* Sage accent on subheading numbers/kickers within prose (h4, h5) */
.prose h4,
.prose h5 {
  font-family: var(--font-sans);
  color: var(--color-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
}

/* Body text in serif for comfortable long-form reading */
.prose p {
  font-family: var(--font-serif);
  color: var(--color-text);
}

/* Inline links: rose accent with tasteful underline */
.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.18s ease;
}

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

/* Decorative sage rule at the start of the prose content block */
.prose::before {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--color-accent);
  margin-block-end: var(--space-lg);
}

/* Article intro paragraph — slightly larger, italic serif lead-in */
.article-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text);
  opacity: 0.8;
  line-height: var(--leading-snug);
}

/* --- Footer --------------------------------------------------------------- */
/* Swiss: border-block-start already uses --color-text via layout.css.
   Paint: surface tint + sage accent on the copy. */
.site-footer {
  background: var(--color-bg);
}

.footer-copy {
  color: var(--color-text);
  opacity: 0.6;
}

/* Sage accent dot — secondary color made visible as a decorative mark */
.footer-copy::before {
  content: '◆  ';
  color: var(--color-sage);
  opacity: 1;
  font-size: 0.6em;
  vertical-align: middle;
}

/* --- Dark theme overrides ------------------------------------------------- */
/* Only properties that differ visually from the token-driven defaults need
   to be listed here. The --color-* tokens handle most of the flipping;
   these are the opacity / tint adjustments that tokens alone can't express. */
:root[data-theme="dark"] .hero__lead {
  opacity: 0.75;
}

:root[data-theme="dark"] .article-intro {
  opacity: 0.7;
}

:root[data-theme="dark"] .footer-copy {
  opacity: 0.5;
}

:root[data-theme="dark"] .site-header {
  background: var(--color-bg);
}

:root[data-theme="dark"] .prose h2 {
  border-block-start-color: var(--color-border);
}

/* --- Micro-interactions (DS-5) ------------------------------------------- */
/* 1. Nav link underline slide-in — subtle, type-led reveal.
   position:relative lives in the base .nav-links a rule above. */
.nav-links a::after {
  content: '';
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--color-sage);
  transition: width 0.22s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

/* 2. Article card row — rose bg tint on hover, contained within the row's
   own inline space (no transform, no overflow bleed into swiss hairlines).
   transition lives in the base .article-card rule above. */
.article-card:has(.article-card__link:hover) {
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}

/* --- Reduced motion safety (DS-5) ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after,
  .article-card,
  .theme-toggle,
  .nav-toggle,
  .article-card__link,
  .nav-links a,
  .article-list__link,
  .prose a {
    transition-duration: 0.01ms !important;
  }
}