/* Senna design tokens — every design value lives here.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;500&family=Stack+Sans+Text:wght@300;400;500;600&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces (warm off-white ladder — fixed) ── */
  --bg: #F7F5F0;          /* page paper */
  --surface: #FFFFFF;     /* cards, nav, inputs, editor windows */
  --surface-1: #F9F8F7;   /* FAQ rows, soft panels */
  --surface-2: #F2EFED;   /* tinted bands, secondary buttons */
  --ink-bg: #231F23;      /* dark buttons, testimonial band, code-editor bar */
  --ink-bg-2: #3A343A;    /* hover on dark */

  /* ── Text ── */
  --text: #231F23;        /* headings, strong text */
  --text-2: #5E5D5A;      /* body copy (light 300) */
  --muted: #686662;       /* captions, footer group labels */
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, .72);

  /* ── Lines ── */
  --line: #ECE9E4;
  --line-2: rgba(35, 31, 35, .1);
  --line-on-dark: rgba(255, 255, 255, .12);

  /* ── Brand / accent (brand slots — the palette engine re-tints these) ── */
  --accent: #F3582D;      /* the "/" mark, active nav, chart bars, code highlights */
  --accent-rgb: 243, 88, 45;
  --accent-ink: #B23812;  /* accent as text on paper (≥ 4.5:1) */
  --accent-soft: #FDE4DA;
  --accent-on-dark: #FF7A52;
  --on-accent: #231F23;  /* text on accent fills (chart bars, markers) — the palette engine re-picks it */
  /* pastel art colours — gradient panels, announcement bar, chips */
  --pastel-lilac: #CEBFFA;
  --pastel-sky: #C8E1FF;
  --pastel-peach: #FA9762;
  --pastel-mint: #CCFDCF;
  --pastel-aqua: #B6F4FB;

  /* ── Data / status ── */
  --success: #1E9E4A; --success-ink: #17703A; --success-soft: #E3F7E8; --danger: #D93025; --danger-soft: #FDE7E5; --warning: #D98A00; --star: #F3582D;

  --dot-red: #FF5F57; --dot-amber: #FEBC2E; --dot-green: #28C840; /* window dots on mock-up bars */

  /* ── Fonts ── */
  --font-display: "IBM Plex Serif", ui-serif, Georgia, serif;
  --font: "Stack Sans Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Radii ── */
  --r-xs: 4px;            /* tag chips */
  --r-sm: 8px;            /* small pills, inputs in mock-ups */
  --r-btn: 12px;          /* buttons, FAQ rows, inputs */
  --r: 16px;              /* cards, CTA panel, editor windows */
  --r-lg: 20px;           /* tinted bands */
  --r-xl: 24px;           /* big art panels */
  --r-pill: 100px;

  /* ── Spacing / layout ── */
  --container: 1480px;    /* outer max width */
  --pad-x: 30px;          /* side padding of every section */
  --narrow: 1000px;
  --section: 120px;       /* vertical padding of a section */
  --head-gap: 60px;       /* section head → content */
  --gap: 24px;

  /* ── Shadows ── */
  --shadow-1: 0 1px 2px rgba(35, 31, 35, .06), 0 0 0 1px rgba(35, 31, 35, .04);
  --shadow-2: 0 24px 48px -20px rgba(35, 31, 35, .25);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s; --dur-fast: .3s;
}
@media (max-width: 991px) { :root { --section: 90px; --head-gap: 48px; --pad-x: 24px; } }
@media (max-width: 560px) { :root { --section: 70px; --head-gap: 36px; --pad-x: 16px; } }

/* ── Type scale (serif display, light sans body) ── */
.t-display { font-family: var(--font-display); font-weight: 400; font-size: clamp(42px, 5vw, 72px); line-height: 1.06; letter-spacing: -.05em; text-wrap: balance; }
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.1; letter-spacing: -.055em; text-wrap: balance; }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.2; letter-spacing: -.042em; text-wrap: balance; }
.t-h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.2; letter-spacing: -.045em; text-wrap: balance; }
.t-h4 { font-family: var(--font); font-weight: 400; font-size: 24px; line-height: 1.32; letter-spacing: -.01em; }
.t-h5 { font-family: var(--font); font-weight: 400; font-size: 20px; line-height: 1.4; letter-spacing: -.01em; }
.t-lead { font-size: 18px; line-height: 1.6; font-weight: 300; }
.t-body { font-size: 16px; line-height: 1.65; font-weight: 300; }
.t-small { font-size: 14px; line-height: 1.6; font-weight: 300; }
.t-label { font-size: 12px; line-height: 1.2; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }