/* ═══════════════════════════════════════════════════════════════
   Civic Nexus — shared design system  (2026 revamp)
   Loaded AFTER each page's inline styles so it wins the cascade.

   Palette: paper ground + ink-violet duotone.
   Type:    Newsreader (display) · Public Sans (UI/body) ·
            IBM Plex Mono (labels, coordinates, metadata).
   Fonts are self-hosted — no third-party font requests.
   ═══════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts ── */
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader[opsz,wght].woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-Italic[opsz,wght].woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('fonts/PublicSans[wght].woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────
   New names (--cn-*) plus overrides of the legacy names still
   referenced by older page styles, so everything recolors. */
:root {
  /* paper */
  --cn-paper:      #F6F4ED;
  --cn-paper-high: #FCFBF7;
  --cn-paper-wash: #EDEAE0;
  --cn-rule:       #D9D5C9;
  --cn-rule-soft:  #E6E2D7;

  /* ink */
  --cn-ink:        #201C29;
  --cn-ink-soft:   #524D66;
  --cn-ink-faint:  #767085;

  /* ink-violet ramp (de-neoned) */
  --cn-violet-900: #2B2148;
  --cn-violet-800: #38295E;
  --cn-violet-700: #4A3B7D;
  --cn-violet-600: #59488F;
  --cn-violet-500: #6E5DA6;
  --cn-violet-200: #CFC7E2;
  --cn-violet-100: #E9E5F2;

  /* type roles */
  --cn-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --cn-font-body:    'Public Sans', 'Segoe UI', -apple-system, sans-serif;
  --cn-font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* ── legacy token overrides (recolor old pages) ── */
  --violet-deep:  var(--cn-violet-900);
  --violet-mid:   var(--cn-violet-700);
  --violet-core:  var(--cn-violet-700);
  --violet-light: var(--cn-violet-500);
  --violet-pale:  var(--cn-violet-200);
  --violet-ghost: var(--cn-violet-100);
  --bg-light:     var(--cn-paper);
  --text-dark:    var(--cn-ink);
  --text-mid:     #3A3550;
  --text-muted:   var(--cn-ink-soft);
  --icon-stroke:  var(--cn-violet-700);
  --glass-bg:     var(--cn-paper-high);
  --glass-border: var(--cn-rule);
  --glass-shadow: rgba(32, 28, 41, 0.06);
}

/* ── Base ── */
body {
  font-family: var(--cn-font-body);
  background: var(--cn-paper);
  color: var(--cn-ink);
  transition: none;
}
::selection { background: var(--cn-violet-200); color: var(--cn-violet-900); }

h1, h2, h3, .section-title {
  font-family: var(--cn-font-display);
  letter-spacing: 0;
}

/* Kill legacy decoration wholesale */
.bg-orb, .eyebrow-dot { display: none !important; }
[class] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Section eyebrow labels → mono small caps */
.section-label, .hero-eyebrow {
  font-family: var(--cn-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cn-violet-700);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  animation: none;
}
.divider {
  height: 1px !important;
  background: var(--cn-rule) !important;
  opacity: 1 !important;
}

/* ── Header (legacy pages) ─────────────────────────────────── */
.main-header {
  background: rgba(246, 244, 237, 0.94);
  border-bottom: 1px solid var(--cn-rule);
  border-radius: 0;
  box-shadow: none;
  height: 64px;
}
.brand {
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: 21px;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--cn-ink);
}
.nav-link {
  color: var(--cn-ink-soft);
  font-weight: 500;
  border-radius: 4px;
}
.nav-link:hover {
  background: var(--cn-paper-wash);
  color: var(--cn-ink);
  transform: none;
}
.nav-link.active {
  background: var(--cn-paper-wash);
  color: var(--cn-ink);
}
.nav-divider { background: var(--cn-rule); }
.header-btn-ghost, .header-btn {
  color: var(--cn-ink);
  border: 1px solid var(--cn-rule);
  background: transparent;
  border-radius: 6px;
  min-height: 36px;
}
.header-btn-ghost:hover, .header-btn:hover {
  background: var(--cn-paper-wash);
  border-color: var(--cn-ink-faint);
  color: var(--cn-ink);
  transform: none;
}
.header-btn-solid {
  color: var(--cn-paper-high);
  background: var(--cn-violet-700);
  border: 1px solid var(--cn-violet-700);
  border-radius: 6px;
  min-height: 36px;
}
.header-btn-solid:hover {
  background: var(--cn-violet-800);
  border-color: var(--cn-violet-800);
  transform: none;
  box-shadow: none;
}
.hamburger {
  background: transparent;
  border: 1px solid var(--cn-rule);
  min-width: 44px;
  min-height: 44px;
}
.hamburger:hover { background: var(--cn-paper-wash); }
.hamburger span { background: var(--cn-ink); }

/* Mobile drawer → paper panel */
.mobile-nav {
  background: var(--cn-paper-high) !important;
  border-bottom: 1px solid var(--cn-rule);
  box-shadow: 0 12px 24px rgba(32, 28, 41, 0.08);
}
.mobile-nav-link, .mobile-nav-btn { color: var(--cn-ink); }
.mobile-nav-link:hover, .mobile-nav-btn:hover {
  background: var(--cn-paper-wash);
  color: var(--cn-ink);
}
.mobile-nav-divider { background: var(--cn-rule); }

/* ── Buttons (legacy pages) ── */
.btn-primary {
  background: var(--cn-violet-700);
  border-radius: 6px;
  box-shadow: none;
  min-height: 44px;
}
.btn-primary:hover {
  background: var(--cn-violet-800);
  transform: none;
  box-shadow: none;
}
.btn-secondary {
  background: transparent;
  color: var(--cn-violet-700);
  border: 1px solid var(--cn-violet-700);
  border-radius: 6px;
  min-height: 44px;
}
.btn-secondary:hover {
  background: var(--cn-violet-100);
  transform: none;
  box-shadow: none;
}
.btn-white {
  border-radius: 6px;
  box-shadow: none;
  color: var(--cn-violet-900);
  min-height: 44px;
}
.btn-white:hover { transform: none; box-shadow: none; }

/* ── Cards & callouts (legacy pages) ── */
.tool-card, .pillar {
  background: var(--cn-paper-high);
  border: 1px solid var(--cn-rule);
  border-radius: 8px;
  box-shadow: none;
}
.tool-card::before { display: none; }
.tool-card:not(.coming-soon):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(32, 28, 41, 0.08);
  border-color: var(--cn-violet-500);
}
.tool-tag {
  background: var(--cn-violet-100);
  color: var(--cn-violet-800);
  border: 1px solid var(--cn-violet-200);
  border-radius: 3px;
  font-family: var(--cn-font-mono);
  font-weight: 500;
}
.callout-band {
  background: var(--cn-violet-900);
}
.callout-band::before { display: none; }

/* ── Footer (legacy pages) ── */
.main-footer {
  background: var(--cn-paper);
  border-top: 1px solid var(--cn-rule);
}
.footer-brand-name { color: var(--cn-ink); font-family: var(--cn-font-display); font-weight: 600; }
.footer-col h4 {
  font-family: var(--cn-font-mono);
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--cn-ink-faint);
}
.footer-col a:hover { color: var(--cn-violet-700); }
.footer-bottom { border-top: 1px solid var(--cn-rule-soft); }

/* ── Accessibility ── */
:focus-visible {
  outline: 2px solid var(--cn-violet-700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reduced motion: silence decorative entrances/drifts but keep
   functional feedback (spinners, progress) alive. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.spinner):not(.btn-spinner):not([class*="progress"]) {
    animation-delay: 0s !important;
    animation-duration: 0.001s !important;
  }
  * { transition-duration: 0.001s !important; }
}