/* ==========================================================================
   Design tokens — On Time Capital
   Change brand colors, type and spacing here; components only use tokens.
   ========================================================================== */
:root {
  /* Surfaces */
  --bg: #f9f7f3;            /* page background (warm ivory) */
  --bg-band: #f2efe9;       /* alternating section bands */
  --bg-panel: #f3f1ed;      /* calculator panel */
  --surface: #ffffff;       /* cards */
  --line: #e6e2da;          /* hairlines, input borders */
  --line-strong: #d6d1c7;

  /* Ink */
  --ink: #141b2d;           /* primary text, primary buttons */
  --ink-2: #3a4256;         /* secondary text */
  --muted: #7d8394;         /* labels, meta */

  /* Brand */
  --accent: #c9792f;        /* amber — accent words, highlights */
  --accent-strong: #a95f1d;
  --accent-soft: #fbead6;   /* chips, selected states */
  --highlight: #fdf3e4;     /* funding amount box */
  --highlight-line: #f1d9b6;
  --sky: #dfe9f5;           /* article tag chips */
  --sky-ink: #2b4a72;
  --link: #2f64b5;          /* inline links on light bg */

  /* Dark bands */
  --navy: #1c2a42;          /* story band */
  --navy-deep: #111a2b;     /* FAQ + footer */
  --on-dark: #f4f1ea;
  --on-dark-muted: #9aa3b5;
  --on-dark-line: rgba(255, 255, 255, 0.12);
  --footer-fine: #6c7487;  /* dark grey for the footer legal text */

  /* Feedback */
  --error: #c2412d;

  /* Slider */
  --slider-from: #f3b26b;
  --slider-to: #c4651c;
  --slider-track: #e5e1da;

  /* Type */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);  /* hero H1 */
  --fs-h2: clamp(2rem, 1.5rem + 1.8vw, 3rem);            /* section titles */
  --fs-h3: 1.375rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-2xs: 0.625rem;

  /* Layout */
  --container: 1190px;
  --container-wide: 1340px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --section-y: clamp(64px, 7vw, 104px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;

  --shadow-card: 0 1px 2px rgba(20, 27, 45, 0.06), 0 8px 24px rgba(20, 27, 45, 0.06);
  --shadow-pop: 0 12px 32px rgba(20, 27, 45, 0.14);
}