/* ============================================================
   THE AMERICAN FABRIC — Colors & Type
   Civic, plainspoken, literary. Broadsheet meets modern.
   ============================================================ */

/* --- Web fonts (Google Fonts; closest match to an editorial
   civic broadsheet w/ a humanist sans body) ------------------
   DISPLAY: Georgia (system) — chosen for its broadsheet warmth
   and civic familiarity. No webfont needed.
   BODY SANS: Manrope — geometric humanist, modern but warm.
   MONO: JetBrains Mono for any code or data.
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- PALETTE — primitives ------------------------ */
  /* Warm parchment neutrals — the "cloth" */
  --cream-50:  #FBF8F2;
  --cream-100: #F6F1E6;
  --cream-200: #EDE5D3;
  --cream-300: #DFD3B8;
  --cream-400: #BFB094;
  --cream-500: #8F8368;

  /* Ink — the writing on the cloth */
  --ink-900: #141820;  /* near-black, never pure */
  --ink-800: #1F2A44;  /* federal navy — primary ink */
  --ink-700: #2E3A55;
  --ink-600: #4A5470;
  --ink-500: #6B7289;
  --ink-400: #8C93A6;
  --ink-300: #B4B9C7;
  --ink-200: #D6D9E2;
  --ink-100: #E8EAF0;

  /* Flag red — used sparingly, like a seal */
  --red-900: #5B0F0F;
  --red-800: #7A1818;
  --red-700: #8B1A1A;   /* primary accent */
  --red-600: #A3332F;
  --red-500: #BE5A54;

  /* Brass — rare, for emphasis ornaments */
  --brass-700: #8F6A1F;
  --brass-600: #B8882E;
  --brass-500: #C8A24A;
  --brass-300: #E3C888;
  --brass-100: #F4E7C6;

  /* State colors (restrained — no neon) */
  --success: #3F6B4E;
  --warning: #A86B2C;
  --danger:  #8B1A1A;
  --info:    #1F2A44;

  /* ---------- SEMANTIC TOKENS ----------------------------- */
  /* Surfaces */
  --bg:           var(--cream-50);
  --bg-raised:    #FFFFFF;
  --bg-sunken:    var(--cream-100);
  --bg-inverse:   var(--ink-900);
  --bg-accent:    var(--ink-800);

  /* Foregrounds */
  --fg-1:  var(--ink-900);   /* primary text */
  --fg-2:  var(--ink-700);   /* secondary text */
  --fg-3:  var(--ink-500);   /* tertiary / meta */
  --fg-4:  var(--ink-400);   /* disabled */
  --fg-inverse: var(--cream-50);
  --fg-accent:  var(--red-700);
  --fg-link:    var(--ink-800);

  /* Lines */
  --rule-strong: var(--ink-900);
  --rule:        var(--ink-300);
  --rule-soft:   var(--cream-300);
  --rule-accent: var(--red-700);

  /* ---------- TYPE — families ----------------------------- */
  --font-serif:   Georgia, "Times New Roman", "Source Serif 4", serif;
  --font-sans:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Semantic families */
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);
  --font-prose:   var(--font-serif);

  /* ---------- TYPE — scale (1.25 major third-ish) --------- */
  --step--2: 0.75rem;   /* 12 */
  --step--1: 0.875rem;  /* 14 */
  --step-0:  1rem;      /* 16 */
  --step-1:  1.125rem;  /* 18 */
  --step-2:  1.375rem;  /* 22 */
  --step-3:  1.75rem;   /* 28 */
  --step-4:  2.25rem;   /* 36 */
  --step-5:  3rem;      /* 48 */
  --step-6:  4rem;      /* 64 */
  --step-7:  5.5rem;    /* 88 */

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-prose: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.14em;

  /* ---------- SPACING (4-pt grid) ------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII (mostly square — civic prints) -------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (rare; paper-on-paper) -------------- */
  --shadow-1: 0 1px 0 rgba(20, 24, 32, 0.06),
              0 1px 2px rgba(20, 24, 32, 0.04);
  --shadow-2: 0 1px 0 rgba(20, 24, 32, 0.05),
              0 4px 12px rgba(20, 24, 32, 0.06);
  --shadow-3: 0 2px 0 rgba(20, 24, 32, 0.04),
              0 12px 28px rgba(20, 24, 32, 0.10);
  --shadow-press: inset 0 1px 2px rgba(20, 24, 32, 0.12);

  /* ---------- MOTION -------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-soft:     cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 380ms;

  /* ---------- LAYOUT -------------------------------------- */
  --measure-short: 48ch;
  --measure-prose: 66ch;
  --measure-wide:  78ch;
  --container:     1200px;
}

/* ============================================================
   Semantic element styles — use as base
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display & headings — serif, civic */
.h-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-7);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-5);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
}

/* Eyebrow / kicker — caps, tracked, the Federalist-paper rail */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Lede / deck */
.lede {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: var(--lh-prose);
  color: var(--fg-2);
  max-width: var(--measure-prose);
}

/* Body prose */
p { margin: 0 0 var(--space-4); max-width: var(--measure-prose); }
.prose {
  font-family: var(--font-prose);
  font-size: var(--step-1);
  line-height: var(--lh-prose);
  color: var(--fg-1);
}
.prose p { margin-bottom: 1em; }
.prose em { font-style: italic; }

/* Pull quote — the quiet centerpiece */
blockquote, .pullquote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--rule-accent);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  max-width: var(--measure-short);
}

/* Small, meta, captions */
.meta, small {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

/* Code */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Links — inky, underline on hover */
a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration-color: var(--fg-link); }

/* Selection */
::selection { background: var(--brass-100); color: var(--ink-900); }

/* Rules — broadsheet dividers */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-6) 0;
}
hr.strong { border-top-color: var(--rule-strong); }
hr.accent { border-top-color: var(--rule-accent); border-top-width: 2px; }