/* ==========================================================================
PolitiConnect design tokens
Copied verbatim (values, not files) from design-reference/PolitiConnect
Design System/tokens/*.css — the system's source of truth for color,
type, spacing, radius, and elevation. Do not hand-edit a value here
without updating the design system reference first.
========================================================================== */
/* Webfonts are loaded via a in index.html's ,
not an @import here — @import blocks discovery until this whole file is
fetched and parsed; a lets the browser request fonts in parallel
with tokens.css/site.css. Keep both in sync if the font list changes. */
:root {
/* fonts */
--font-display: Lora, "EB Garamond", Georgia, serif;
--font-sans: Montserrat, "Instrument Sans", -apple-system, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
/* brand */
--gold-500: #e6b566; /* Sunlit Clay — the one CTA colour */
--gold-700: #b09058; /* pressed */
--gold-100: #ece3d0; /* disabled wash */
--sage-500: #8fa99b; /* Muted Teal — secondary brand */
--amber-600: #c78a54; /* warning — never the CTA gold */
--rust-600: #984938; /* error — muted, never partisan red */
/* neutrals: snow -> parchment -> ink */
--snow-000: #f7f8f6;
--snow-050: #f2f4f0;
--parchment-100: #eeefea;
--cream-200: #e8e3d6;
--navy-900: #0f1f2e;
--navy-800: #1d2c3a;
--navy-700: #2b3946;
--slate-600: #32404c;
--slate-500: #55606a;
--slate-400: #8f969c;
--slate-300: #b1b7ba;
--slate-200: #a6acb0;
/* semantic aliases */
--color-primary: var(--gold-500);
--color-primary-active: var(--gold-700);
--color-primary-disabled: var(--gold-100);
--color-accent-sage: var(--sage-500);
--surface-canvas: var(--snow-000);
--surface-soft: var(--snow-050);
--surface-card: var(--parchment-100);
--surface-cream-strong: var(--cream-200);
--surface-dark: var(--navy-900);
--surface-dark-soft: var(--navy-800);
--surface-dark-elevated: var(--navy-700);
--border-hairline: var(--parchment-100);
--border-hairline-soft: var(--snow-050);
--text-ink: var(--navy-900);
--text-body-strong: var(--slate-600);
--text-body: var(--slate-500);
--text-muted: var(--slate-400);
--text-muted-soft: var(--slate-300);
--text-on-primary: var(--navy-900); /* ink on gold — never white */
--text-on-dark: var(--snow-000);
--text-on-dark-soft: var(--slate-200);
--color-success: var(--sage-500);
--color-warning: var(--amber-600);
--color-error: var(--rust-600);
--focus-ring: rgba(230, 181, 102, 0.15);
/* type scale */
--display-xl-size: 64px; --display-xl-lh: 1.05; --display-xl-ls: -1.5px;
--display-lg-size: 48px; --display-lg-lh: 1.1; --display-lg-ls: -1px;
--display-md-size: 36px; --display-md-lh: 1.15; --display-md-ls: -0.5px;
--display-sm-size: 28px; --display-sm-lh: 1.2; --display-sm-ls: -0.3px;
--display-weight: 400;
--title-lg-size: 22px; --title-lg-lh: 1.3;
--title-md-size: 18px; --title-md-lh: 1.4;
--title-sm-size: 16px; --title-sm-lh: 1.4;
--body-md-size: 16px; --body-md-lh: 1.55;
--body-sm-size: 14px; --body-sm-lh: 1.55;
--caption-size: 13px; --caption-lh: 1.4;
--caption-upper-size: 12px; --caption-upper-ls: 1.5px;
--code-size: 14px; --code-lh: 1.6;
--button-size: 14px;
--nav-link-size: 14px;
--weight-regular: 400;
--weight-medium: 500;
/* spacing (4px base unit) */
--space-xxs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-xxl: 48px;
--space-section: 96px;
--container-max: 1200px;
/* radius */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px; /* buttons, inputs */
--radius-lg: 12px; /* content cards */
--radius-xl: 16px; /* hero / feature illustration containers */
--radius-pill: 9999px;
/* elevation — colour-block first; shadow is rare */
--shadow-none: none;
--shadow-hover: 0 1px 3px rgba(15, 31, 46, 0.08);
--border-1: 1px solid var(--border-hairline);
--border-1-soft: 1px solid var(--border-hairline-soft);
/* motion — 120-180ms colour transitions only, never scale/position */
--transition-color: 160ms linear;
}
@media (prefers-reduced-motion: reduce) {
:root {
--transition-color: 0ms;
}
}