/* ==========================================================================
   theme.css — Soulful Bonds
   PAINT LAYER ONLY: color, fonts, accent flourishes.
   No layout properties (display:grid / grid-template-* / structural multi-
   column flex / structural spacing) — those belong to layout.css.
   ========================================================================== */

/* --- Typeface import -------------------------------------------------- */
/* Cormorant Garamond: humanist expressive serif for display + headlines.
   DM Sans: clean, generous optical-size-aware sans for body copy. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');

/* --- Font role variables ---------------------------------------------- */
:root {
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', ui-sans-serif, sans-serif;
}

/* --- Light theme (default) -------------------------------------------- */
:root[data-theme="light"] {
  --color-bg:        #FAF8F5;   /* Parchment — warm off-white canvas */
  --color-text:      #1E1A14;   /* Ink — deep warm near-black */
  --color-accent:    #7B4FA6;   /* Amethyst — links, rules, active states */
  --color-surface:   #EDE5D9;   /* warm cream — raised header/footer, distinct from bg */
  --color-border:    #C8BAA8;   /* warm greige — hairlines */
  --color-secondary: #E07B3F;   /* Ember — kicker eyebrows, warmth highlights */
}

/* --- Dark theme ------------------------------------------------------- */
:root[data-theme="dark"] {
  --color-bg:        #1E1A14;   /* Ink — deep canvas */
  --color-text:      #FAF8F5;   /* Parchment — legible near-white */
  --color-accent:    #9B6EC6;   /* Amethyst lifted — same identity, clears WCAG AA on dark */
  --color-surface:   #2D261D;   /* warm dark surface — raised, distinct from bg */
  --color-border:    color-mix(in srgb, #FAF8F5 18%, #1E1A14);  /* subtle warm hairline */
  --color-secondary: #E07B3F;   /* Ember — 6:1 on dark bg, consistent across themes */
}

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

/* --- Site header ------------------------------------------------------ */
/* Surface tint lifts the masthead above the body canvas */
.site-header {
  background: var(--color-surface);
}

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

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

/* --- Navigation links ------------------------------------------------- */
/* Slight opacity to establish hierarchy; hover restores full ink + accent */
.nav-links a {
  color: var(--color-text);
  opacity: 0.68;
}

.nav-links a:hover {
  color: var(--color-accent);  /* layout.css also sets this — both agree */
  opacity: 1;
}

/* --- Theme toggle — pill shape, bordered ----------------------------- */
.theme-toggle {
  border-radius: 9999px;
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
}

.theme-toggle:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  opacity: 1;  /* override base.css opacity fade in favour of bg reveal */
}

/* --- Mobile nav toggle — matching pill -------------------------------- */
.nav-toggle {
  border-radius: 9999px;
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
}

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

/* --- Hero ------------------------------------------------------------- */
/* Subtle amethyst-tinted crown fades into the parchment — literary warmth */
.hero {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)),
    var(--color-bg) 55%
  );
}

/* Decorative amethyst rule centred above the headline */
.hero::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-accent);
  margin-inline: auto;
  margin-block-end: var(--space-lg);
}

.hero__title {
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

/* Override layout.css color: var(--color-accent) — tinting a 2-line lead in a
   mid-tone accent reads as washed-out body copy. Lead should read as full ink. */
/* higher specificity than layout.css's .hero__lead so the high-contrast
   text color wins the cascade (layout.css links AFTER theme.css) */
.hero .hero__lead {
  color: var(--color-text);
}

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

/* --- Section title with centred Ember accent mark -------------------- */
/* Ember on the section divider; Amethyst on the hero rule above — warm/cool
   rhythm on the homepage that keeps both palette accents visibly at rest. */
.section-title {
  color: var(--color-text);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--color-secondary);
  margin-inline: auto;
  margin-block-end: var(--space-sm);
}

/* --- Article card (editorial rule-divided entry) ---------------------- */
/* Surface background lifts the card off the page canvas; a visible border-
   inline-start hairline anchors it; hover tints the rule to amethyst. */
.articles-grid {
  gap: var(--space-lg);
}

.article-card {
  background: var(--color-surface);
  border-inline-start: 2px solid var(--color-border);
  border-inline-end: 2px solid var(--color-border);
  padding-inline-start: var(--space-md);
}

.article-card:hover {
  border-inline-start-color: var(--color-accent);
}

/* Ember eyebrow label — warm categorical signal */
.article-card__kicker {
  color: var(--color-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-card__title {
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.article-card__link {
  color: var(--color-text);
  text-decoration-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

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

/* --- Page hero (articles list + article pages) ------------------------ */
.page-hero {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-accent) 5%, var(--color-bg)),
    var(--color-bg) 70%
  );
}

.page-title {
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.015em;
}

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

/* --- Article list items ----------------------------------------------- */
/* Ember on the leading-zero counter — the only at-rest Ember touch on this
   page. Amethyst stays on the link hover; both accents appear in the list. */
.article-list__item::before {
  color: var(--color-secondary);
}

/* Kicker rule kept for forward-compat; no kicker elements exist in current HTML */
.article-list__kicker {
  color: var(--color-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-list__link {
  color: var(--color-text);
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

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

/* --- Prose (article body) --------------------------------------------- */
.prose {
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* DS-required h1 size override */
.prose h1 {
  font-size: var(--text-2xl);
}

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

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

/* Amethyst left-rule on section heads — chapter-break editorial signature */
.prose h2 {
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: var(--space-sm);
  color: var(--color-text);
}

.prose a {
  color: var(--color-accent);
  text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

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

/* --- Site footer ------------------------------------------------------ */
/* Surface tone anchors the footer as a distinct zone — reads as raised floor */
.site-footer {
  background: var(--color-surface);
}

/* padding-block: var(--space-lg) is set by layout.css — within the ≤ lg cap */
.footer-copy {
  color: var(--color-text);
  letter-spacing: 0.1em;
  opacity: 0.65;
}

/* --- Restrained motion (DS-5) ---------------------------------------- */
/* Wrap all transitions so they only run when the user has not opted out.
   base.css already has a global reduce block that zeroes everything; this
   gates the theme's own additions on the affirmative preference. */
@media (prefers-reduced-motion: no-preference) {
  .nav-brand,
  .nav-links a,
  .theme-toggle,
  .nav-toggle,
  .article-card,
  .article-card__link,
  .article-list__link,
  .prose a {
    transition:
      color            0.18s ease,
      opacity          0.18s ease,
      border-color     0.18s ease,
      background       0.18s ease,
      text-decoration-color 0.18s ease;
  }
}