/* Design tokens — from the approved mockup mockups/g359/c2-paternoster.html (S2, 2026-10-29).
 * Names say the role; values are the mockup's own. "added" marks what the mockup did not define. */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-night: #0B1D25;          /* header, hero, dark bands */
  --color-night-2: #11303B;
  --color-night-3: #173E4B;        /* logo tile, raised dark surface */
  --color-bg: #F4F4EF;             /* paper — page background */
  --color-surface: #FFFFFF;
  --color-surface-2: #F8F8F5;
  --color-text: #0D1A1F;
  --color-muted: #56656A;
  --color-amber: #F4A62A;          /* the one warm accent: CTA on dark, floors */
  --color-amber-2: #E08F12;
  --color-teal: #0F7B87;           /* links, eyebrows, active filters on light */
  --color-teal-tint: color-mix(in oklch, #0F7B87 10%, #fff);
  --color-border: rgba(13, 26, 31, .1);
  --color-border-2: rgba(13, 26, 31, .18);
  --color-border-dark: rgba(255, 255, 255, .12);
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: rgba(255, 255, 255, .72);

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-brand: var(--color-teal);
  --color-amber-hover: #FFB83F;
  --color-teal-hover: #0B6670;
  --color-error: #B3261E;
  --color-error-bg: #FBEAE8;
  --color-success: #146C43;
  --color-success-bg: #E6F4EC;
  --color-warn-bg: #FBEBDD;
  --color-warn: #8A4A0B;
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-amber) 60%, transparent);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --fs-h1: clamp(2.5rem, 1.4rem + 3.8vw, 4.9rem);
  --fs-h1-page: clamp(2.2rem, 1.3rem + 2.8vw, 3.8rem);   /* added: inner pages */
  --fs-h2: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem);
  --fs-h3: 1.15rem;
  --fs-lead: 1.12rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .78rem;
  --lh-tight: 1.05;
  --lh-base: 1.55;
  --tracking-display: -.04em;

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px;
  --section-pad: 96px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(13, 26, 31, .06), 0 10px 26px -16px rgba(13, 26, 31, .3);
  --shadow-lift: 0 2px 4px rgba(13, 26, 31, .06), 0 24px 52px -24px rgba(13, 26, 31, .45);

  /* ── Container ───────────────────────────────────────────────────────── */
  --container: 1240px;
  --container-pad: 32px;
  --hd: 68px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-sticky: 20;
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Breakpoints (constants, keep in step with kit.config.json → breakpoints):
   390 mobile · 760 phone→tablet · 1100 tablet · 1240 header collapses · 1440 desktop */
@media (max-width: 760px) {
  :root { --container-pad: 16px; --section-pad: 64px; }
}