/* ==========================================================================
   THE CLOSER CLUB — theme.css (PAINT LAYER ONLY)
   --------------------------------------------------------------------------
   Painted on top of the "magazine" layout lib (asymmetric featured-first grid)
   + the vendored base.css tokens. Structure lives in base.css/layout.css;
   this file owns ONLY color, type, and accent flourishes.

   Palette (4 named HEX, two-theme expansion ≤ 8 distinct):
     #F6F2EC Warm Linen · #1C1714 Espresso Ink · #B23A48 Ember Rose · #C2922E Brass
     (+ a brightened rose for dark-mode legibility)
   Raw hex appears ONLY in --color-* token defs (DS-17). Surfaces/borders are
   derived with color-mix so every paint declaration flips between themes.
   ========================================================================== */

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

/* --- Font roles (do not change with theme) ----------------------------- */
:root {
  --font-sans:  "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
}

/* --- Light theme (brand default) --------------------------------------- */
:root[data-theme="light"] {
  --color-bg:      #F6F2EC;
  --color-text:    #1C1714;
  --color-accent:  #B23A48;
  --color-gold:    #C2922E;
  --color-surface: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-border:  color-mix(in srgb, var(--color-text) 16%, var(--color-bg));
}

/* --- Dark theme (derived to match the light default) ------------------- */
:root[data-theme="dark"] {
  --color-bg:      #1C1714;
  --color-text:    #F6F2EC;
  --color-accent:  #CE5567;
  --color-gold:    #C2922E;
  --color-surface: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-border:  color-mix(in srgb, var(--color-text) 22%, var(--color-bg));
}

/* --- Page canvas + base type ------------------------------------------- */
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
}

.page {
  background: var(--color-bg);
  color: var(--color-text);
}

/* --- Header / nav ------------------------------------------------------ */
.site-header {
  background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg));
}

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

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

/* Brand-shaped theme toggle + burger: a borderless warm pill, not a stock
   square (DS-12). Markup/JS stay deterministic — this is cascade paint only. */
.theme-toggle,
.nav-toggle {
  border-radius: 999px;
  border: var(--border-width) solid var(--color-border);
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg));
  color: var(--color-text);
}

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

/* --- Hero -------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)) 0%, transparent 60%),
    radial-gradient(90% 120% at 100% 10%, color-mix(in srgb, var(--color-gold) 10%, var(--color-surface)) 0%, transparent 55%),
    var(--color-surface);
  border-block-end: var(--border-width) solid var(--color-border);
}

.hero__title {
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.hero__lead {
  color: color-mix(in srgb, var(--color-text) 82%, var(--color-bg));
}

/* --- Section + page headings ------------------------------------------ */
.section-title,
.page-title {
  color: var(--color-text);
  padding-block-end: var(--space-2xs);
  border-block-end: calc(var(--border-width) * 2) solid var(--color-gold);
}

/* Small-caps brass eyebrow — painted whether or not the kicker ships. */
.article-card__kicker,
.article-list__kicker {
  color: var(--color-gold);
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
}

/* --- Article cards (magazine grid) ------------------------------------- */
.article-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent);
}

.article-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-text) 12%, transparent);
}

/* Non-lead card titles inherit --color-text from the body; the lead (first-child)
   title must keep the layout's light-on-accent color (var(--color-bg)) for AA
   contrast on the rose, so it is deliberately NOT repainted here. */

/* Lead story sits on the accent — keep its kicker readable on the rose. */
.article-card:first-child .article-card__kicker {
  color: color-mix(in srgb, var(--color-bg) 86%, var(--color-gold));
}

/* --- Articles list page ------------------------------------------------ */
.article-list__item {
  background: color-mix(in srgb, var(--color-text) 3%, var(--color-bg));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

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

/* --- Article prose ----------------------------------------------------- */
.prose {
  font-family: var(--font-serif);
}

.prose h1 {
  color: var(--color-text);
  font-size: var(--text-2xl); /* DS-6: readable long-form title on mobile */
}

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

/* Brass tick before each H2 — decorative accent, brings the gold into prose. */
.prose h2 {
  padding-inline-start: var(--space-sm);
  border-inline-start: calc(var(--border-width) * 3) solid var(--color-gold);
}

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

.prose blockquote {
  border-inline-start: calc(var(--border-width) * 3) solid var(--color-accent);
  padding-inline-start: var(--space-md);
  color: color-mix(in srgb, var(--color-text) 80%, var(--color-bg));
  font-style: italic;
}

/* --- Footer ------------------------------------------------------------ */
.site-footer {
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg));
}

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

/* --- Desktop type sizing ----------------------------------------------- */
@media (min-width: 768px) {
  .prose h1 {
    font-size: var(--text-3xl); /* DS-6: ~h2 visual weight on desktop */
  }
}