/*!
 * Rights for the Merrimack (rightsforthemerrimack.org)
 * Top-to-Bottom Color Progression: Sunrise Gold -> Valley Green -> River Blue
 * High-contrast tokens audited for both Sunrise (Light) and Sunset (Dark) modes
 */

:root {
  /* Core Palette: Sunrise Golds, Valley Greens, River Blues */
  --sunrise-gold: #f4b942;
  --sunset-amber: #e07a38;
  --sunset-ember: #b84318;
  --valley-pine: #1b432c;
  --valley-hill: #2f6341;
  --valley-meadow: #5c916b;
  --river-deep: #0f3547;
  --river-current: #175169;
  --river-riffle: #2f7d8f;

  /* Light Mode Surfaces & High-Contrast Text */
  --bg-canvas: #fdfbf7;
  --bg-surface: rgba(255, 255, 255, 0.92);
  --bg-surface-solid: #ffffff;
  --bg-input: #ffffff;
  --text-heading: #0f3547;
  --text-primary: #142c38;
  --text-secondary: #34505e;
  --text-accent-warm: #a83a10;
  --text-accent-green: #1e4d32;
  --text-accent-blue: #14495e;

  /* High-Contrast Pill Surfaces (Light Mode) */
  --pill-warm-bg: #fff0d4;
  --pill-warm-border: rgba(184, 67, 24, 0.28);
  --pill-green-bg: #e2f2e7;
  --pill-green-border: rgba(30, 77, 50, 0.24);
  --pill-blue-bg: #dff0f5;
  --pill-blue-border: rgba(20, 73, 94, 0.24);

  --border-flow: rgba(15, 53, 71, 0.15);
  --divider-line: rgba(15, 53, 71, 0.12);

  /* Top-to-Bottom Vertical Color Zones (Light Mode) */
  --zone-sunrise: linear-gradient(180deg, #fff4df 0%, #fef9ef 58%, #eaf5ed 100%);
  --zone-valley: linear-gradient(180deg, #eaf5ed 0%, #e1f0e6 58%, #e4f2f6 100%);
  --zone-river: linear-gradient(180deg, #e4f2f6 0%, #d8ecf2 65%, #cce4ed 100%);
  --gradient-footer: linear-gradient(135deg, #0b2938 0%, #16495e 55%, #234f35 100%);
  --gradient-sunset-cta: linear-gradient(135deg, #df7330 0%, #b84318 100%);
  --gradient-horizon-bar: linear-gradient(90deg, #f4b942 0%, #e07a38 34%, #3b6e4c 68%, #1d5f7a 100%);

  /* Typography & Motion */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-pill: 9999px;
  --ease-flow: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-flow: 280ms var(--ease-flow);
}

/* Dark / Sunset Mode: High-Contrast Overrides */
[data-theme="twilight"] {
  --bg-canvas: #0a1922;
  --bg-surface: rgba(18, 40, 54, 0.94);
  --bg-surface-solid: #132a3a;
  --bg-input: #0e2230;
  --text-heading: #f7fbfd;
  --text-primary: #eef6fa;
  --text-secondary: #c7dce8;
  --text-accent-warm: #ffc478;
  --text-accent-green: #8ee8a8;
  --text-accent-blue: #84dcf5;

  --pill-warm-bg: rgba(244, 185, 66, 0.18);
  --pill-warm-border: rgba(255, 196, 120, 0.42);
  --pill-green-bg: rgba(92, 145, 107, 0.24);
  --pill-green-border: rgba(142, 232, 168, 0.40);
  --pill-blue-bg: rgba(62, 142, 158, 0.25);
  --pill-blue-border: rgba(132, 220, 245, 0.40);

  --border-flow: rgba(165, 220, 240, 0.24);
  --divider-line: rgba(165, 220, 240, 0.16);

  --zone-sunrise: linear-gradient(180deg, #241914 0%, #192428 56%, #112622 100%);
  --zone-valley: linear-gradient(180deg, #112622 0%, #10282c 58%, #0f2533 100%);
  --zone-river: linear-gradient(180deg, #0f2533 0%, #0c1f2c 65%, #091822 100%);
  --gradient-footer: linear-gradient(135deg, #07131b 0%, #0e2938 55%, #132e20 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--transition-flow), color var(--transition-flow);
}

h1, h2, h3, h4, .font-serif-display {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
}

p {
  color: var(--text-secondary);
  max-width: 65ch;
}

a {
  color: var(--text-accent-blue);
  text-decoration: none;
  transition: color var(--transition-flow);
}

a:hover {
  color: var(--text-accent-warm);
}

.zone-sunrise-bg {
  background: var(--zone-sunrise);
  position: relative;
  overflow: hidden;
}

.zone-valley-bg {
  background: var(--zone-valley);
  position: relative;
}

.zone-river-bg {
  background: var(--zone-river);
  position: relative;
}

.flow-card {
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-flow);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px -8px rgba(8, 28, 38, 0.10);
  transition: transform var(--transition-flow), box-shadow var(--transition-flow), border-color var(--transition-flow);
}

.flow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(8, 28, 38, 0.18);
}

.pill-warm {
  background: var(--pill-warm-bg);
  border: 1px solid var(--pill-warm-border);
  color: var(--text-accent-warm);
}

.pill-green {
  background: var(--pill-green-bg);
  border: 1px solid var(--pill-green-border);
  color: var(--text-accent-green);
}

.pill-blue {
  background: var(--pill-blue-bg);
  border: 1px solid var(--pill-blue-border);
  color: var(--text-accent-blue);
}

.btn-sunset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--gradient-sunset-cta);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(184, 67, 24, 0.42);
  transition: all var(--transition-flow);
}

.btn-sunset:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  color: #ffffff;
}

.btn-river-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  border: 1px solid var(--border-flow);
  font-weight: 600;
  transition: all var(--transition-flow);
}

.btn-river-outline:hover {
  border-color: var(--text-accent-blue);
}

.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border-flow);
  color: var(--text-primary);
}

.form-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.72;
}

.form-input:focus {
  outline: none;
  border-color: var(--text-accent-blue);
  box-shadow: 0 0 0 3px rgba(62, 142, 158, 0.25);
}