/* i80 warm overlay · shared skin for the GDD-family pages (i80 home + doc articles).
   Sits ON TOP of assets/css/style.css · reassigns --i80-* tokens + overrides key selectors.
   Load AFTER style.css. Do NOT link this from road-to-i80.html (keeps old style). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');

body {
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --color-bg: #faf8f4;
  --color-surface: #fffdf9;
  --color-surface-muted: #f1ede4;
  --color-ink: #1c1917;
  --color-ink-soft: #4a423b;
  --color-muted: #8a8073;
  --color-border: #e8e2d7;
  --color-border-strong: #d5cebf;
  --color-accent: #b85c38;
  --color-accent-hover: #8b3e21;
  --color-accent-soft: #f7e6df;
  --color-teal: #376f6a;
  --color-teal-hover: #2c5d59;
  --i80-dark: #1c1917;
  --i80-muted: #8a8073;
  --i80-border: #e8e2d7;
  --i80-bg: #faf8f4;
  --i80-accent: #b85c38;
  --i80-accent-dark: #8b3e21;
  --bs-primary: #b85c38;
  background: var(--color-bg) !important;
  color: var(--color-ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  body {
    --color-bg: #191512; --color-surface: #221d17; --color-surface-muted: #2a251f;
    --color-ink: #f3efe7; --color-ink-soft: #d3cabb; --color-muted: #9a9082;
    --color-border: #37322a; --color-border-strong: #4a4238;
    --color-accent: #d68a5f; --color-accent-hover: #e0a074; --color-accent-soft: #3a2418;
    --color-teal: #6fa9a2; --color-teal-hover: #8fbfb8;
    --i80-dark: #f3efe7; --i80-muted: #9a9082; --i80-border: #37322a; --i80-bg: #191512;
    --i80-accent: #d68a5f; --i80-accent-dark: #e0a074;
    --bs-primary: #d68a5f;
  }
}

/* Typography */
h1, h2, .section-title, .article-body h1, .article-subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
}
h3, h4, h5, h6 { font-family: var(--font-ui); }
a { color: var(--color-teal); }
a:hover { color: var(--color-teal-hover); }
:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; border-radius: 4px; }
code { background: var(--color-surface-muted); color: var(--color-accent-hover); font-variant-numeric: tabular-nums; }
.muted, .text-muted { color: var(--color-muted) !important; }

/* Nav */
.navbar { background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border); }
.navbar .nav-link { color: var(--color-ink-soft) !important; }
.navbar .nav-link:hover { color: var(--color-accent) !important; }
/* .brand-i80 stays red (site style.css owns brand identity) */

/* Sections + surfaces */
.hero { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%) !important; }
.section { background: var(--color-bg) !important; }
.section.bg-soft, .bg-soft { background: var(--color-surface-muted) !important; }
.card-soft { background: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-ink); }
.card-soft .muted { color: var(--color-muted) !important; }
.section-kicker { color: var(--color-accent); font-family: var(--font-mono); }

/* Article chrome (doc/*.html shell) */
.article-body {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(20,20,20,0.03), 0 8px 24px rgba(20,20,20,0.04) !important;
}
.article-body h1 { color: var(--color-ink); font-weight: 500; }
.article-body h2, .article-body h3 { color: var(--color-ink); }
.article-body p, .article-body li { color: var(--color-ink-soft); }
.article-body a { color: var(--color-teal); }
.article-subtitle { color: var(--color-ink-soft); }
.article-meta { color: var(--color-muted); }
.article-callout {
  background: var(--color-surface-muted) !important;
  border-left-color: var(--color-accent) !important;
  color: var(--color-ink-soft);
}
.idea-card, .cta-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-ink);
}
.cta-card { border-top-color: var(--color-accent) !important; }
.quote-box {
  background: var(--color-surface) !important;
  border-left-color: var(--color-accent) !important;
  color: var(--color-ink);
}

/* Buttons */
.btn { border-radius: 10px; padding: 8px 16px; font-weight: 500; font-family: var(--font-ui); }
.btn.btn-lg { padding: 10px 20px; font-size: 1.02rem; }
.btn.btn-sm { padding: 6px 12px; border-radius: 8px; font-size: .82rem; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }
.btn-outline-dark { color: var(--color-accent); border-color: var(--color-accent); background: transparent; }
.btn-outline-dark:hover, .btn-outline-dark:focus { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-outline-secondary { color: var(--color-ink-soft); border-color: var(--color-border-strong); }
.btn-outline-secondary:hover { background: var(--color-surface-muted); color: var(--color-ink); border-color: var(--color-border-strong); }

/* Timeline (i80 home + any article using .timeline chrome) */
.timeline::before {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-soft) 100%) !important;
  opacity: .55;
}
.timeline-marker {
  background: var(--color-accent) !important;
  border-color: var(--color-accent-soft) !important;
  box-shadow: 0 0 0 4px var(--color-surface) !important;
}
.timeline-marker-current {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-soft) !important;
}