/* ==========================================================================
   theme.css — Love Compass paint layer (colors + fonts + accent flourishes)
   --------------------------------------------------------------------------
   Layout lib: "journal" (read via design-context.json). This file paints ONLY
   on top of base.css + layout.css — no grid/flex/structural spacing here.
   Palette (dev-prompt):
     #EDF1F7 Chart Paper · #15203A Meridian Ink · #F0533C True North · #1C7FB5 Azimuth Blue
   Cartographic editorial field-guide: cool chart-paper ground, ink type, a coral
   "needle" of warmth, azure structural marks like latitude lines.
   ========================================================================== */

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

/* --- Font roles (theme-independent) ------------------------------------- */
:root {
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", ui-sans-serif, sans-serif;

  /* Shared brand accents — spelled once, reused across both themes.
     (Raw hex is permitted only in --color-* token defs; paint uses var().) */
  --color-accent:   #F0533C; /* True North — the coral needle */
  --color-accent-2: #1C7FB5; /* Azimuth Blue — structural map marks */
}

/* --- Light scheme (default): a calm nautical chart --------------------- */
:root[data-theme="light"] {
  --color-bg:      #EDF1F7;
  --color-text:    #15203A;
  --color-accent:  #F0533C;
  --color-surface: color-mix(in srgb, white 62%, var(--color-bg));
  --color-border:  color-mix(in srgb, var(--color-text) 16%, transparent);
}

/* --- Dark scheme: a night-navigation instrument panel ------------------ */
:root[data-theme="dark"] {
  --color-bg:      #0E1626;
  --color-text:    #E8EEF7;
  --color-accent:  #F0533C;
  --color-surface: color-mix(in srgb, white 9%, var(--color-bg));
  --color-border:  color-mix(in srgb, white 22%, transparent);
}

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

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

/* --- Header / nav ------------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
  backdrop-filter: saturate(1.1);
}

.nav-brand { color: var(--color-text); }
.nav-brand::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-end: 0.5rem;
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-2) 28%, transparent);
  vertical-align: middle;
}

.nav-links a { color: color-mix(in srgb, var(--color-text) 88%, var(--color-bg)); }

/* Theme toggle + burger — brand shape: round, borderless, coral on hover (DS-12) */
.theme-toggle,
.nav-toggle {
  border-radius: 999px;
  color: var(--color-text);
  background: transparent;
}
.theme-toggle:hover,
.nav-toggle:hover {
  opacity: 1;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(60% 120% at 50% -10%, color-mix(in srgb, var(--color-accent-2) 12%, transparent), transparent 70%);
}
.hero__title {
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.hero__title::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin: var(--space-md) auto 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  border-radius: 999px;
}
/* Lead is body-size: keep it on the high-contrast ink for AA, not tinted accent */
.hero .hero__lead {
  color: var(--color-text);
  opacity: 0.82;
}

/* --- Section heads ------------------------------------------------------ */
.section-title,
.page-title {
  color: var(--color-text);
}
.section-title::after,
.page-title::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin: var(--space-sm) auto 0;
  background: var(--color-accent-2);
  border-radius: 999px;
}

/* --- Article cards (journal two-up grid) ------------------------------- */
.article-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.article-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  border-start-start-radius: var(--radius-sm);
  border-start-end-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.article-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-text) 14%, transparent);
}
.article-card:hover::before { opacity: 1; }
.article-card__title { color: var(--color-text); }
.article-card__link { color: var(--color-text); }

/* --- Articles list page ------------------------------------------------ */
.article-list__item {
  border-color: var(--color-border);
  transition: padding-inline-start 0.2s ease;
}
.article-list__item:hover { padding-inline-start: var(--space-2xs); }
.article-list__link { color: var(--color-text); }

/* --- Article prose ------------------------------------------------------ */
.prose { color: var(--color-text); }
.prose :is(h2, h3, h4) { color: var(--color-text); }
.prose h2 {
  padding-block-end: var(--space-2xs);
  border-block-end: var(--border-width) solid var(--color-border);
}
.prose h3 { color: color-mix(in srgb, var(--color-text) 92%, var(--color-accent-2)); }
.prose a {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.1em;
}
.prose a:hover { color: var(--color-accent); }
/* DS: long-form title must read as a heading, not a billboard */
.prose h1 { font-size: var(--text-2xl); }
@media (min-width: 768px) {
  .prose h1 { font-size: var(--text-3xl); }
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: color-mix(in srgb, var(--color-surface) 60%, var(--color-bg));
  border-block-start-color: var(--color-border);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 2px;
  background: var(--color-accent);
}
.footer-copy { color: color-mix(in srgb, var(--color-text) 78%, var(--color-bg)); }

/* --- Dark-scheme touch: let the coral needle glow on the panel -------- */
:root[data-theme="dark"] .article-card:hover {
  box-shadow: 0 12px 28px color-mix(in srgb, black 45%, transparent);
}
:root[data-theme="dark"] .nav-brand::before {
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 60%, transparent);
}