/* Colorado Politics Map design tokens.
   Source: Political Network Design System (tokens/colors.css, spacing.css, typography.css).
   Change values there first; see guidelines/RULES.md. */
:root {
  /* Brand */
  --navy-900: #121D35;
  --navy-800: #1B2A4A;   /* Deep Navy — header, primary ink, primary buttons */
  --navy-700: #2A3B5F;
  --navy-600: #3D5079;
  --navy-100: #E4E8F0;
  --navy-50:  #F1F3F7;

  /* Parchment neutrals (warm, saturation < 0.02) */
  --parchment: #FBFBF9;  /* canvas / graph grid surface */
  --paper:     #FFFFFF;  /* raised panels, cards */
  --stone-50:  #F5F5F1;
  --stone-100: #EDECE7;
  --stone-200: #DFDDD6;
  --stone-300: #C9C6BD;
  --stone-400: #A3A098;
  --stone-500: #7B7972;
  --stone-600: #5C5B56;
  --stone-700: #3F3F3B;
  --ink:       #1B2A4A;

  /* Muted analysis accents — shared chroma, varied hue */
  --slate:  oklch(0.50 0.065 252);
  --teal:   oklch(0.55 0.065 200);
  --sage:   oklch(0.56 0.070 150);
  --sand:   oklch(0.66 0.065 78);
  --plum:   oklch(0.50 0.060 315);
  --clay:   oklch(0.55 0.060 50);
  --moss:   oklch(0.58 0.055 168);
  --graphite: oklch(0.50 0.020 250);

  /* Node types (entity colors) */
  /* Brighter, well-separated hues so each type is recognizable at a glance */
  --node-politician:          oklch(0.60 0.120 252);  /* blue */
  --node-candidate-committee: oklch(0.70 0.090 232);  /* sky */
  --node-party-committee:     oklch(0.55 0.120 278);  /* indigo */
  --node-bill:                oklch(0.64 0.120 150);  /* green */
  --node-government:          oklch(0.56 0.070 215);  /* steel */
  --node-pac:                 oklch(0.58 0.120 315);  /* violet */
  --node-issue-committee:     oklch(0.66 0.100 190);  /* teal */
  --node-donor:               oklch(0.70 0.110 75);   /* sand-gold */
  --node-lobbyist:            oklch(0.65 0.120 50);   /* terracotta */
  --node-lobbying-firm:       oklch(0.62 0.100 350);  /* mauve */
  --node-business:            oklch(0.58 0.030 250);  /* slate gray */
  --node-nonprofit:           oklch(0.68 0.110 125);  /* olive-lime */
  --node-nonprofit-irs:       oklch(0.56 0.120 20);   /* brick rose: IRS-listed exempt organisation */

  /* Semantic status — no red, no bright yellow */
  --verified:      oklch(0.52 0.080 150);
  --verified-bg:   oklch(0.95 0.030 150);
  --info:          oklch(0.50 0.065 240);
  --info-bg:       oklch(0.95 0.020 240);
  --pending:       oklch(0.52 0.060 75);
  --pending-bg:    oklch(0.95 0.030 85);
  --error:         oklch(0.50 0.080 40);   /* muted terracotta, used sparingly */
  --error-bg:      oklch(0.95 0.025 45);

  /* Choropleth — sequential slate */
  --choro-slate-1: oklch(0.95 0.012 245);
  --choro-slate-2: oklch(0.85 0.030 245);
  --choro-slate-3: oklch(0.72 0.048 245);
  --choro-slate-4: oklch(0.57 0.060 248);
  --choro-slate-5: oklch(0.42 0.060 252);
  /* Choropleth — diverging teal ↔ sand */
  --choro-div-1: oklch(0.50 0.065 200);
  --choro-div-2: oklch(0.68 0.050 195);
  --choro-div-3: oklch(0.92 0.015 120);
  --choro-div-4: oklch(0.80 0.050 80);
  --choro-div-5: oklch(0.64 0.070 70);

  /* Semantic aliases */
  --surface-header: var(--navy-800);
  --surface-canvas: var(--parchment);
  --surface-panel:  var(--paper);
  --surface-sunken: var(--stone-50);
  --surface-hover:  var(--stone-100);
  --surface-selected: var(--navy-50);
  --text-primary:   var(--navy-800);
  --text-body:      var(--stone-700);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-on-dark:   #F4F5F2;
  --text-on-dark-muted: #AEB6C8;
  --text-link:      var(--navy-600);
  --border-subtle:  var(--stone-100);
  --border-default: var(--stone-200);
  --border-strong:  var(--stone-300);
  --focus-ring:     oklch(0.60 0.080 230);
  --edge-default:   #9AA3B2;
  --edge-strong:    var(--navy-700);
  --grid-line:      rgba(27, 42, 74, 0.045);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(27, 42, 74, 0.06);
  --shadow-2: 0 1px 2px rgba(27, 42, 74, 0.05), 0 4px 12px rgba(27, 42, 74, 0.06);
  --shadow-3: 0 2px 4px rgba(27, 42, 74, 0.06), 0 12px 28px rgba(27, 42, 74, 0.10);
  --shadow-node: 0 0 0 3px rgba(255,255,255,0.9), 0 2px 6px rgba(27, 42, 74, 0.18);

  --header-height: 64px;
  --sidebar-left: 240px;
  --sidebar-right: 400px;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

:root {
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 44px;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-caps: 0.12em;

  /* Roles */
  --type-display: 600 var(--text-4xl)/var(--leading-tight) var(--font-serif);
  --type-title: 600 var(--text-2xl)/var(--leading-tight) var(--font-serif);
  --type-entity: 600 var(--text-xl)/var(--leading-tight) var(--font-serif);
  --type-heading: 600 var(--text-lg)/var(--leading-snug) var(--font-sans);
  --type-body: 400 var(--text-md)/var(--leading-body) var(--font-sans);
  --type-label: 500 var(--text-sm)/var(--leading-snug) var(--font-sans);
  --type-caption: 400 var(--text-xs)/var(--leading-snug) var(--font-sans);
  --type-data: 500 var(--text-sm)/var(--leading-snug) var(--font-mono);
}

/* Text size preference (Display settings in the explorer and info pages).
   --text-scale is set on <html> from the visitor's choice; every text token follows it,
   so the type ramp keeps its proportions at each size. */
:root {
  --text-scale: 1;
  --text-2xs: calc(11px * var(--text-scale));
  --text-xs:  calc(12px * var(--text-scale));
  --text-sm:  calc(13px * var(--text-scale));
  --text-md:  calc(14px * var(--text-scale));
  --text-lg:  calc(16px * var(--text-scale));
  --text-xl:  calc(20px * var(--text-scale));
  --text-2xl: calc(24px * var(--text-scale));
  --text-3xl: calc(32px * var(--text-scale));
  --text-4xl: calc(44px * var(--text-scale));
}