/* Civilytics public-good brand — shared CSS for the apps portal, Sablier waiting
   page, and error pages. Mirrors the civilytics.com design system
   (Code/civilytics_homepage2/assets/css/parts/_tokens.css + _base.css + _buttons.css)
   so these surfaces are visually identical to the main site. Token names match
   the site (--cv-*). The Shiny apps consume the same palette via _brand.yml. */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* palette — canonical, from the site's _tokens.css */
  --cv-paper:    #FAF7F2;
  --cv-paper-2:  #F2EDE4;
  --cv-paper-3:  #E6DFD1;
  --cv-rule:     #D6CEBD;
  --cv-rule-strong: #B8AE97;
  --cv-ink:      #0E1A2B;
  --cv-ink-2:    #2B3A52;
  --cv-ink-3:    #5A6A82;
  --cv-ink-4:    #8C97AB;
  --cv-navy-600: #22406A;
  --cv-navy-700: #1A2E4A;
  --cv-accent:           #C25311;  /* display: buttons, pulsemark, decorative */
  --cv-accent-text:      #A04400;  /* accent text on light (WCAG AA) */
  --cv-accent-text-dark: #E07840;  /* accent text on dark (WCAG AA) */
  --cv-accent-hover:     #923D00;

  --cv-font-display: 'Libre Franklin', 'Franklin Gothic', 'Inter', system-ui, sans-serif;
  --cv-font-serif:   'Source Serif 4', Georgia, serif;
  --cv-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --cv-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* 8pt spacing scale */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-5:3rem; --space-6:4rem; --space-7:6rem;

  --cv-radius-sm:4px; --cv-radius-md:6px; --cv-radius-lg:12px;
}

* { box-sizing: border-box; }

html { font-family: var(--cv-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin:0; background: var(--cv-paper); color: var(--cv-ink); font-family: var(--cv-font-sans); }

h1, h2, h3, h4 {
  font-family: var(--cv-font-display); font-weight:800; letter-spacing:-0.025em;
  line-height:1.08; color: var(--cv-ink); text-wrap: pretty; margin: 0 0 .4em;
}
h1 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); font-weight:900; letter-spacing:-0.035em; line-height:1.0; }
h2 { font-size: clamp(1.75rem, 2.8vw, 2.375rem); }
h3 { font-size: 1.5rem; font-weight:700; letter-spacing:-0.022em; color: var(--cv-ink-2); }

p, li { line-height:1.7; text-wrap: pretty; }
a { color: var(--cv-navy-600); text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:2px; transition: color 120ms ease; }
a:hover { color: var(--cv-navy-700); text-decoration-thickness:2px; }
code, .mono { font-family: var(--cv-font-mono); font-feature-settings:"tnum" 1,"zero" 1; }
:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 2px; }

/* === signature editorial primitives (from the site) === */
.cv-eyebrow {
  font-family: var(--cv-font-sans); font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color: var(--cv-accent-text);
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.75rem;
}
.cv-eyebrow::before { content:""; display:inline-block; width:24px; height:2px; background: var(--cv-accent); }

.cv-section-label {
  font-family: var(--cv-font-display); font-size:1rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color: var(--cv-accent-text);
  margin:0 0 .75rem; display:block;
}
.cv-lead {
  font-family: var(--cv-font-serif); font-size:1.5rem; font-weight:400; line-height:1.5;
  color: var(--cv-ink-2); max-width:62ch; padding-left:1rem; border-left:2px solid var(--cv-accent);
}
.cv-rule-accent { border:none; border-top:2px solid var(--cv-accent); margin:2rem 0; }

/* === buttons (.cv-btn family) === */
.cv-btn {
  display:inline-flex; align-items:center; gap:.5rem; background: var(--cv-navy-600);
  color: var(--cv-paper); padding:.75rem 1.25rem; border-radius:4px;
  font-family: var(--cv-font-sans); font-size:.9375rem; font-weight:600;
  text-decoration:none; border:none; cursor:pointer; white-space:nowrap;
  transition: background 120ms ease, transform 120ms ease;
}
.cv-btn:hover { background: var(--cv-navy-700); color: var(--cv-paper); }
.cv-btn:active { transform: translateY(1px); }
.cv-btn--accent { background: var(--cv-accent); color:#fff; }
.cv-btn--accent:hover { background: var(--cv-accent-hover); color:#fff; }
.cv-btn--ghost { background:transparent; color: var(--cv-ink); border:1px solid var(--cv-rule-strong); }
.cv-btn--ghost:hover { background: var(--cv-paper-2); border-color: var(--cv-ink-3); }

/* === centered single-message layout (waiting / error pages) === */
.cv-center { min-height:100vh; display:grid; place-items:center; padding: var(--space-3); }
.cv-card {
  max-width:36rem; width:100%; padding: var(--space-5); text-align:center; background:#fff;
  border:1px solid var(--cv-rule); border-radius: var(--cv-radius-lg);
  box-shadow: 0 10px 40px rgba(14,26,43,.10);
}
.cv-card .logo { height:30px; margin-bottom: var(--space-3); }
.cv-card p { margin:.35rem 0; color: var(--cv-ink-2); }
.cv-muted { color: var(--cv-ink-3); font-size:.9rem; margin-top: var(--space-3); }

/* pulse spinner (accent on paper) — nods to the Civic Pulse mark */
.cv-spinner {
  width:38px; height:38px; margin:0 auto var(--space-3); border-radius:50%;
  border:4px solid var(--cv-paper-2); border-top-color: var(--cv-accent);
  animation: cv-spin 1s linear infinite;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }