/* Shared design tokens. css/theme.css sets the colour and font roles. */
:root {
  /* Type roles — themes set these */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-wordmark: var(--font-display);

  /* Type scale — one size per role, on every page (DESIGN.md has the table). A heading takes the
     size of the role it plays, so the outline can stay true where the two differ: the host's name
     is an h2 in the outline but reads as a sub-heading. Nothing sets a heading or paragraph size
     of its own; a new page picks from these. */
  --text-h1: clamp(3rem, 1.6rem + 3.8vw, 5.5rem);         /* page title, ~80px on a laptop */
  --text-h2: clamp(2.25rem, 1.5rem + 2.1vw, 3.5rem);      /* section title, ~54px */
  --text-h3: clamp(1.75rem, 1.3rem + 1vw, 2.25rem);       /* sub-heading, ~36px */
  --text-h4: clamp(1.25rem, 1.1rem + 0.55vw, 1.625rem);   /* card and item title, ~26px */
  --text-lead: clamp(1.125rem, 0.98rem + 0.45vw, 1.3125rem); /* the paragraph under a page title, ~21px */
  --text-body: clamp(1rem, 0.94rem + 0.25vw, 1.1875rem);  /* every other paragraph, ~18.5px */
  --text-small: 0.9375rem;                                 /* meta, captions, notes, text links */
  --text-label: 0.75rem;                                   /* tracked capitals over a heading */
  --text-display: var(--text-h1);
  --text-nav: clamp(0.9375rem, 0.9rem + 0.12vw, 1.0625rem);
  --text-wordmark: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
  --space-m: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --space-l: clamp(2rem, 1.6rem + 1.4vw, 3rem);
  --space-xl: clamp(3rem, 2.2rem + 3vw, 5.5rem);
  --gutter: clamp(1rem, 0.2rem + 4.2vw, 5.5rem);
  /* The widest the page's content runs, the footer's own width. Past it the content stops
     growing and the ground fills the sides, so a wide screen or a zoomed-out browser gets
     margins rather than a stretched page. A section whose ground or hairlines run edge to edge
     pads its content in to the frame with --frame-inset: the gutter until the screen is wider
     than the frame, then whatever centres the frame. */
  --page-frame: 88.75rem;
  --frame-inset: max(var(--gutter), (100% - var(--page-frame)) / 2);
  /* The breathing room before the footer. It lives here because the pages reach the footer in
     three different shapes and all of them have to open the same gap. */
  /* Brought down from clamp(7.2rem, 14.4vw, 13.5rem) on 6 November 2026 (Peppino: a large blank
     area between the last buttons and the footer) */
  --space-prefooter: clamp(4.5rem, 9vw, 8.5rem);
  /* A pair of buttons side by side on a narrow screen (Danylo, 5 November 2026): the gap between
     them, their labels' side padding, and the small line under a button ("International
     WhatsApp", a number, an address), sized with the screen so the longest, the email address,
     still fits under its button on a 360px phone */
  --pair-gap: 0.625rem;
  --pair-pad: 0.75rem;
  --pair-note: clamp(0.6875rem, 3.2vw, var(--text-small));

  /* Colour roles — themes set these */
  --color-ground: #111;
  --color-section: #000;
  --color-card: #222;
  --color-media: #333;
  --color-tint: #444;
  --color-ink: #fff;
  --color-ink-soft: #eee;
  --color-muted: #ccc;
  --color-accent: #fff;
  --color-nav: #fff;
  --color-cta: #fff;
  --color-cta-hover: #eee;
  --color-cta-ink: #111;
  --color-focus: #fff;
  --color-label: var(--color-ink-soft);
  --color-line: color-mix(in srgb, var(--color-ink) 22%, transparent);

  --radius-cta: 0.25rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* For things that travel from one place to another (the carousels and galleries): a gentle
     start and a long settle, so the eye can follow a photograph the whole way across */
  --ease-glide: cubic-bezier(0.65, 0, 0.25, 1);
  /* Smooth wheel scrolling (components/site/SmoothScroll.tsx): the share of the remaining
     distance the page covers each frame. Lower glides longer; 0 leaves the wheel native. */
  --scroll-lerp: 0.1;
}

/* A phone: a little more room before the footer than the clamp's floor (Danylo, 5 November
   2026, as 9.5rem; brought down to 6.5rem on 6 November after Peppino's review) */
@media (max-width: 40rem) {
  :root {
    --space-prefooter: 6.5rem;
  }
}