/* ============================================================
   Kallvara design tokens (2026-09-27). The site copies this file byte-identical to /assets/tokens.css.
   Palette: ink (near-black blue) + warm paper + one signal colour (coral) with its echo tint. The signal is the
   "voice" in the mark: use it for the one action or accent per view, never for body text on paper
   (use --signal-deep there: 4.8:1 on white).
   Type: Bricolage Grotesque (display) + Inter (body), both SIL OFL 1.1, self-hosted latin woff2.
   ============================================================ */
:root {
  /* colour — raw */
  --ink: #0C1017;
  --ink-90: #151B25;
  --ink-80: #1E2633;
  --ink-60: #3A4453;
  --ink-40: #6B7483;
  --ink-20: #AEB4BE;
  --ink-10: #D9DDE3;
  --paper: #F7F5F0;
  --paper-2: #EFEBE3;
  --line: #E3DED3;
  --white: #FFFFFF;
  --signal: #FF6A3D;
  --signal-hover: #FF7F57;
  --signal-deep: #C2410C;
  --echo: #FFA27F;
  --signal-10: #FFF0EA;
  --good: #1F8A5B;
  --good-10: #E6F4EC;
  --amber: #B7791F;
  --amber-10: #FBF1DE;

  /* colour — roles */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-subtle: var(--paper-2);
  --surface-dark: var(--ink);
  --surface-dark-2: var(--ink-90);
  --text-strong: var(--ink);
  --text-body: #2E3643;
  --text-muted: #5B6472;
  --text-on-dark: #C9CED6;
  --text-link: var(--signal-deep);
  --border-subtle: var(--line);
  --border-strong: #CFC8BA;
  --border-dark: var(--ink-80);

  /* type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lead: 1.1875rem;
  --text-h4: 1.25rem;
  --text-h3: 1.5rem;
  --text-h2: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
  --text-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --text-display: clamp(2.5rem, 1.3rem + 5vw, 4.75rem);
  --lh-tight: 1.02;
  --lh-heading: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --ls-display: -0.035em;
  --ls-heading: -0.025em;
  --ls-eyebrow: 0.12em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* space (8px rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --section-y: clamp(64px, 5vw + 40px, 120px);
  --container-max: 1180px;
  --container-pad: clamp(16px, 4vw, 32px);

  /* shape + depth */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(12, 16, 23, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(12, 16, 23, 0.22);
  --shadow-xl: 0 40px 80px -30px rgba(12, 16, 23, 0.55);
  --shadow-signal: 0 10px 28px -10px rgba(255, 106, 61, 0.65);
  --ring: 0 0 0 3px rgba(255, 106, 61, 0.45);

  /* motion */
  --dur: 180ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}