/* ==========================================================================
   theme.css — VibeWithPeople paint layer
   --------------------------------------------------------------------------
   Paint-only: colors, Google Fonts, accent flourishes, hover states.
   Layout structure lives in layout.css (loaded after this).
   Base tokens (spacing, type scale, container) come from base.css.

   Palette (DS-2):
     #FAFAF7  Warm White     → --color-bg, --color-surface
     #1A1A2E  Near-Navy      → --color-text, --color-border
     #FF6B35  Coral-Orange   → --color-accent
     #6C63FF  Electric Indigo → decorative accent / secondary highlights

   Color scheme: light (DS-1)
   ========================================================================== */

/* --- Google Fonts -------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* --- Color & font contract ----------------------------------------------- */
:root {
  /* Five required color variables (DS-2) */
  --color-bg:      #FAFAF7;
  --color-text:    #1A1A2E;
  --color-accent:  #FF6B35;
  --color-surface: #FAFAF7;
  --color-border:  #1A1A2E;

  /* Electric Indigo as a named token for deliberate accent usage */
  --color-indigo:  #6C63FF;

  /* Font role assignments (DS-6) */
  --font-sans:  'DM Sans', sans-serif;
  --font-serif: 'Lora', serif;
}

/* --- Base page paint ----------------------------------------------------- */
body {
  font-family: var(--font-serif);
  background: var(--color-bg);
  color: var(--color-text);
}

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

/* --- Navigation ---------------------------------------------------------- */
.site-header {
  background: var(--color-bg);
  border-block-end-color: var(--color-border);
}

.site-nav {
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .site-nav {
    padding-inline: var(--space-xl);
  }
}

.nav-brand {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

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

.nav-links {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-links a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-accent);
}

.nav-links a[aria-current="page"] {
  border-block-end: 2px solid var(--color-accent);
  padding-block-end: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a {
    transition: none;
  }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  padding-block: var(--space-2xl);
  padding-inline: var(--space-md);
  background: var(--color-bg);
  /* Subtle warm texture via layered CSS gradient — no raster (DS-3) */
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(255, 107, 53, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(108, 99, 255, 0.05) 0%, transparent 55%);
}

@media (min-width: 768px) {
  .hero {
    padding-inline: var(--space-xl);
  }
}

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

/* Coral underline accent on the hero heading */
.hero__title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--color-accent);
  margin-block-start: var(--space-sm);
  margin-inline: auto;
}

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

/* --- Section titles ------------------------------------------------------ */
.section-title,
.page-title {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

/* Indigo top-rule accent on section titles */
.section-title::before {
  content: '';
  display: block;
  width: 2rem;
  height: 3px;
  background: var(--color-indigo);
  margin-block-end: var(--space-sm);
  margin-inline: auto;
}

/* --- Article cards ------------------------------------------------------- */
.article-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.article-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .article-card {
    transition: none;
  }
  .article-card:hover {
    transform: none;
  }
}

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

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

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

/* Indigo left-rule on card hover for a second accent touch */
.article-card {
  position: relative;
}

.article-card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--color-indigo);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.article-card:hover::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .article-card::before {
    transition: none;
  }
}

/* --- Articles list (articles.html) -------------------------------------- */
.article-list__item {
  border-block-end-color: var(--color-border);
}

.article-list__item:first-child {
  border-block-start-color: var(--color-border);
}

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

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

@media (prefers-reduced-motion: reduce) {
  .article-list__link {
    transition: none;
  }
}

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

/* Override default --text-4xl heading that is too large in a reading column */
.prose h1 {
  font-size: var(--text-2xl);
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
}

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

.prose h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-text);
  /* Coral left-rule accent on article section headings */
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: var(--space-sm);
}

.prose h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-indigo);
}

.prose h4,
.prose h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-text);
}

.prose a {
  color: var(--color-accent);
  text-decoration-color: rgba(255, 107, 53, 0.4);
}

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

.prose strong {
  font-weight: 700;
  color: var(--color-text);
}

/* --- Page hero (used on inner pages) ------------------------------------ */
.page-hero {
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
  background-image:
    radial-gradient(ellipse 70% 50% at 80% 30%, rgba(108, 99, 255, 0.06) 0%, transparent 55%);
}

@media (min-width: 768px) {
  .page-hero {
    padding-inline: var(--space-xl);
  }
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg);
  border-block-start-color: var(--color-border);
  padding-block: var(--space-lg);
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .site-footer {
    padding-inline: var(--space-xl);
  }
}

.footer-copy {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  opacity: 0.6;
}