/* ============================================================
   TORUS VOTER SYSTEMS — colors & type foundation
   ============================================================
   - Humanist serif throughout (Newsreader)
   - JetBrains Mono for data, captions, numeric labels
   - Prismatic 8-color "narrative segment" palette
   - Warm cream paper + deep ink base
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;0,6..72,800;1,6..72,300;1,6..72,400;1,6..72,500;1,6..72,600&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- BASE / NEUTRALS ---------- */
  --ink:        #14122b;   /* primary text, deep cool ink */
  --ink-2:      #2b2a47;   /* secondary heading ink */
  --ink-3:      #4a4866;   /* body subordinate */
  --mute:       #807d99;   /* captions, meta */
  --rule:       #d6cfba;   /* hairline rules on paper */
  --rule-soft:  #e6e0cc;
  --paper:      #f3eee0;   /* primary background — warm newsprint */
  --paper-2:    #ebe5d2;   /* secondary surface */
  --paper-3:    #e1dac3;   /* tertiary, cards-on-paper */
  --white:      #fcfaf2;   /* near-white, never pure */
  --ink-paper:  #f8f4e6;   /* paper-on-ink areas */

  /* ---------- PRISMATIC NARRATIVE PALETTE ----------
     The 8 "thematic clusters" — used as a kaleidoscope.
     Calibrated to similar perceived weight so any combination
     reads as organized variety, not chaos. */
  --seg-rose:      #c84a6e;
  --seg-coral:     #d57140;
  --seg-amber:     #d39a2b;
  --seg-olive:     #7d8e3f;
  --seg-teal:      #2f8a7e;
  --seg-cerulean:  #2f7eb8;
  --seg-indigo:    #4d4b9e;
  --seg-plum:      #884878;

  /* Quiet tints of each segment, for backgrounds */
  --seg-rose-bg:     #f1d8df;
  --seg-coral-bg:    #f3dccc;
  --seg-amber-bg:    #f1e3bf;
  --seg-olive-bg:    #e0e2c4;
  --seg-teal-bg:     #cee3df;
  --seg-cerulean-bg: #cfe0ed;
  --seg-indigo-bg:   #d6d4e6;
  --seg-plum-bg:     #e6d2df;

  /* ---------- SEMANTIC ---------- */
  --signal-up:    var(--seg-teal);
  --signal-down:  var(--seg-rose);
  --signal-flag:  var(--seg-amber);
  --accent:       var(--seg-cerulean);   /* default UI accent */

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif: "Newsreader", "Source Serif 4", "Charter", Georgia, serif;
  --font-mono:  "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

  /* ---------- TYPE SCALE (humanist serif, generous) ---------- */
  --t-display:   clamp(56px, 7vw, 112px);  /* hero */
  --t-h1:        clamp(40px, 4.6vw, 68px);
  --t-h2:        clamp(30px, 3.2vw, 44px);
  --t-h3:        24px;
  --t-h4:        20px;
  --t-body-lg:   20px;
  --t-body:      17px;
  --t-small:     15px;
  --t-caption:   13px;
  --t-label:     11px;   /* mono labels, ALL CAPS */

  /* ---------- SPACING (8-pt scale, with newspaper margins) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --gutter: clamp(20px, 4vw, 56px);

  /* ---------- RADII (small, restrained) ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---------- BORDERS / SHADOWS ---------- */
  --border-ink: 1px solid var(--ink);
  --border-rule: 1px solid var(--rule);
  --border-rule-soft: 1px solid var(--rule-soft);
  --shadow-card: 0 1px 0 var(--rule), 0 12px 32px -16px rgba(20,18,43,0.18);
  --shadow-lift: 0 2px 0 var(--rule), 0 28px 56px -28px rgba(20,18,43,0.32);

  /* ---------- MOTION ---------- */
  --ease-civic: cubic-bezier(.2,.7,.2,1);
  --ease-quiet: cubic-bezier(.4,0,.2,1);
  --dur-quick: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply via tags or .text-* classes
   ============================================================ */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "calt", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-display, .display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}

h1, .text-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
  margin: 0;
}

h2, .text-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 32;
  text-wrap: balance;
  margin: 0;
}

h3, .text-h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.22;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 24;
  margin: 0;
}

h4, .text-h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: -0.008em;
  margin: 0;
}

p, .text-body {
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
  margin: 0;
}

.text-lede {
  font-family: var(--font-serif);
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
}

.text-small {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-3);
}

.text-caption {
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--mute);
}

/* Mono label — all caps, used for nav, eyebrows, data labels */
.label, .text-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Data / numeric / code */
.mono, .text-mono {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  font-feature-settings: "tnum", "zero";
}

.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
}

/* Italic accent — humanist italics are a feature of the brand */
.it, em {
  font-style: italic;
  font-variation-settings: "opsz" 24;
}

/* ============================================================
   FOUNDATION UTILITIES
   ============================================================ */

.rule       { border-top: var(--border-rule); }
.rule-ink   { border-top: var(--border-ink); }
.hairline   { height: 1px; background: var(--rule); }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease-civic);
}
a:hover { color: var(--seg-cerulean); }

::selection { background: var(--seg-amber); color: var(--ink); }