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

/* ==========================================================================
   THEME — "Soul Haven"  (paint layer only; bento layout owns all structure)
   --------------------------------------------------------------------------
   A dark editorial sanctuary for the inner life: lamplight against a midnight
   window. High-contrast Fraunces serif carries the display voice; Spline Sans
   keeps the body and UI calm and legible. Dark is the default scheme; a clean
   Starlight light counterpart is derived from the same four brand HEX.

   This file PAINTS ONLY — color, type, accent flourishes. layout.css (bento)
   loads after this and owns every grid/flex/spacing/border-as-structure rule.
   Link order: base.css → theme.css → layout.css.

   Palette (raw HEX appears ONLY in --color-* token defs, DS-17):
     #0E1422 Midnight   — deep page ground
     #1A2236 Slate      — raised surface / cards / bands
     #ECEFF7 Starlight  — cool near-white reading text
     #3E86FF Azure      — single vivid accent
   ========================================================================== */

/* --- Font roles (fonts do not flip with theme) -------------------------- */
:root {
  --font-sans:  "Spline Sans", sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
}

/* --- Dual-theme color contract (light) ---------------------------------- */
/* Starlight becomes the page; Midnight becomes the ink. Surface lifts toward
   white so cards read as raised; the shared Azure accent carries the brand. */
:root[data-theme="light"] {
  --color-bg:      #ECEFF7;
  --color-surface: color-mix(in srgb, var(--color-bg) 22%, white);
  --color-text:    #0E1422;
  --color-accent:  #3E86FF;
  --color-border:  color-mix(in srgb, var(--color-text) 14%, transparent);
}

/* --- Dual-theme color contract (dark, DEFAULT) -------------------------- */
:root[data-theme="dark"] {
  --color-bg:      #0E1422;
  --color-surface: #1A2236;
  --color-text:    #ECEFF7;
  --color-accent:  #3E86FF;
  --color-border:  color-mix(in srgb, var(--color-text) 14%, transparent);
}

/* --- Page ground + ambient aurora --------------------------------------- */
/* Soft radial glows read as lamplight; faint enough to keep AA on body text.
   background-attachment keeps the glow anchored for a calm, cinematic field. */
.page {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  background-image:
    radial-gradient(120% 90% at 50% 6%,
      color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 60%),
    radial-gradient(90% 70% at 100% 0%,
      color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

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

/* --- Sticky header: frosted glass over the aurora ----------------------- */
.page .site-header {
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* --- Theme toggle + burger: round lamplit pills (DS-12) ----------------- */
/* A brand-specific shape — circular, faintly surfaced, accent on hover —
   so the controls never read as the default bordered square. */
.theme-toggle,
.nav-toggle {
  border-radius: 999px;
  border: var(--border-width) solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  color: var(--color-text);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover,
.nav-toggle:hover {
  opacity: 1;
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}

/* --- Accent focus ring -------------------------------------------------- */
.theme-toggle:focus-visible,
.nav-toggle:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Hero --------------------------------------------------------------- */
/* Focal aurora pooled to the upper-left, sealed with a hairline rule. */
.hero {
  background-image: radial-gradient(85% 120% at 12% 0%,
    color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 60%);
  border-block-end: var(--border-width) solid var(--color-border);
}
.hero__title {
  color: var(--color-text);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Override layout's accent lead → high-contrast text so the lead clears
   WCAG AA in BOTH themes (DS-15: never set body-size copy in mid-tone accent). */
.hero .hero__lead {
  color: color-mix(in srgb, var(--color-text) 82%, var(--color-bg));
}

/* --- Section / page titles: short accent rule underfoot ----------------- */
.section-title,
.page-title {
  color: var(--color-text);
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 2.75rem 0.1875rem;
  background-position: 0 100%;
  padding-block-end: var(--space-2xs);
}

/* --- Cluster kicker eyebrows (DS-13 richness; accent home) -------------- */
.article-card__kicker,
.article-list__kicker {
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* --- Bento cards: surface sheen + contained hover glow ------------------ */
/* Scoped under .articles-grid to win over layout's later `background`/hover
   shorthand; the glow stays inside the card so it never bleeds the grid gap. */
.articles-grid .article-card {
  background-image: linear-gradient(155deg,
    color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 60%);
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.articles-grid .article-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
  box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

/* --- Articles list rows ------------------------------------------------- */
.article-list .article-list__item {
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.article-list .article-list__item:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
  box-shadow: 0 12px 26px -20px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* --- Article prose ------------------------------------------------------ */
/* Drop cap on the opening paragraph — decorative serif flourish (large
   display, so accent is fine). */
.prose > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  color: var(--color-accent);
  font-size: 3.4em;
  line-height: 0.78;
  float: left;
  padding-inline-end: 0.08em;
  padding-block-start: 0.04em;
}
/* AA-safe links: high-contrast text with an Azure underline; accent on hover. */
.prose a {
  color: var(--color-text);
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.prose a:hover {
  color: var(--color-accent);
}
/* Accent tick above each section heading. */
.prose h2 {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 2.25rem 0.1875rem;
  background-position: 0 0;
  padding-block-start: var(--space-2xs);
}
/* Required long-form title sizing (DS-6): ~h3 on mobile, ~h2 on desktop. */
.prose h1 {
  font-size: var(--text-2xl);
}

/* --- Footer: Slate band sealed with an Azure rule ----------------------- */
.site-footer {
  background: var(--color-surface);
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 0;
}
.footer-copy {
  color: color-mix(in srgb, var(--color-text) 70%, var(--color-bg));
}

/* --- Display typography: serif headlines (flip layout's --font-sans) ----- */
/* .page-prefixed so each wins over layout.css's same-name single-class rules. */
.page .nav-brand,
.page .hero__title,
.page .section-title,
.page .page-title,
.page .article-card__title,
.page .article-list__link,
.page .prose h1,
.page .prose h2,
.page .prose h3 {
  font-family: var(--font-serif);
}

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

/* --- Motion safety (DS-5) ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .nav-toggle,
  .articles-grid .article-card,
  .article-list .article-list__item,
  .prose a {
    transition: none;
  }
}