/* Klema design tokens: the one place for colours, fonts, sizes, spacing and
   corners on church sites. Everything in site.css and the theme files uses
   these names instead of raw values.

   Who sets what:
   - A church's Design (src/themes.rs) sets --brand, --accent, --on-brand,
     --on-accent, the fonts, --heading-weight and the corners (--radius,
     --radius-lg, --btn-radius), in an inline :root after the stylesheets.
   - A theme (theme-*.css) overrides tokens in its own :root: its palette,
     reading size, heading sizes and section rhythm.
   - Raw values are fine only for hairlines (0-3px), em-relative sizes, and
     a theme's one-off display sizes. */
:root {
  /* Colour (themes override the neutrals; the Design sets brand/accent) */
  --brand: #1f4b99;
  --accent: #d9a441;
  --on-brand: #fff;
  --on-accent: #1c1608;
  --brand-ink: color-mix(in srgb, var(--brand) 70%, black);
  --brand-soft: color-mix(in srgb, var(--brand) 10%, white);
  --ink: #1c1d21;
  --ink-soft: #4b4f58;
  --muted: #6d717b;
  --line: #e7e3dc;
  --paper: #fffdf9;
  --tint: #f6f2ea;
  --surface: #ffffff;
  --header-bg: color-mix(in srgb, var(--paper) 88%, transparent);
  --dark: #15161b;          /* footer, dark call to action */
  --on-dark: #c9cad1;
  --on-dark-muted: #8b8d96;
  --dark-line: #2a2b33;
  --shadow: 0 1px 2px rgba(20, 20, 30, .05), 0 8px 24px rgba(20, 20, 30, .06);

  /* Fonts (the Design's font pairing) */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --heading-weight: 600;

  /* Type scale (fixed steps) */
  --text-2xs: .7rem;       /* 11px  tiny labels, taglines */
  --text-xs: .78rem;       /* 12.5px eyebrows, chips */
  --text-sm: .875rem;      /* 14px  captions, fine print */
  --text-md: .95rem;       /* 15px  meta, nav, secondary text */
  --text-base: 1.0625rem;  /* 17px  buttons, form fields, emphasis */
  --text-lg: 1.15rem;      /* 18px  intros, brand name */
  --text-xl: 1.25rem;      /* 20px  leads, card titles */
  --text-2xl: 1.4rem;      /* 22px  small headings */
  --text-3xl: 1.5rem;      /* 24px */
  --text-4xl: 2rem;        /* 32px  big numbers */
  --text-5xl: 2.4rem;      /* 38px */
  --text-body: 17px;       /* reading size (themes adjust) */

  /* Fluid headings (themes adjust) */
  --text-display: clamp(2.6rem, 6.4vw, 5rem);    /* hero title */
  --text-h1: clamp(2.4rem, 5vw, 3.8rem);         /* page title */
  --text-title: clamp(2.2rem, 5vw, 3.6rem);      /* sermon/event/ministry title */
  --text-h2: clamp(1.8rem, 3.2vw, 2.6rem);       /* section title */
  --text-h3: clamp(1.7rem, 3vw, 2.4rem);         /* call to action title */
  --text-quote: clamp(1.5rem, 3vw, 2.2rem);      /* scripture */
  --text-lead: clamp(1.1rem, 1.8vw, 1.35rem);    /* hero subheading */

  /* Spacing: a 4px grid (--space-N = N × 4px), with half steps at the small end */
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-36: 144px;

  /* Section rhythm (themes adjust) */
  --section-y: 88px;          /* top and bottom of a section */
  --section-y-next: 72px;     /* top of a section that follows another */
  --section-y-phone: 64px;    /* both, on phones */

  /* Corners. --radius (cards), --radius-lg and --btn-radius come from the
     Design's corner setting; the smaller ones follow it. */
  --radius: 18px;
  --radius-lg: 26px;
  --btn-radius: 999px;
  --radius-xs: calc(var(--radius) * .22);   /* round: 4px  · soft: 3px · square: 0 */
  --radius-sm: calc(var(--radius) * .45);   /* round: 8px  · soft: 5px · square: 1px */
  --radius-md: calc(var(--radius) * .65);   /* round: 12px · soft: 8px · square: 1px */
  --radius-pill: 999px;
}