/* The site's identity and scales in one file: font faces, design tokens and the wordmark. site.css
   only consumes these custom properties, so the identity changes here (plus the font files) and
   nowhere else. The identity is "Market page", chosen by Paulo on 2026-11-12: Source Serif 4 for
   headings and the wordmark, Source Sans 3 for text and figures, a single navy ink, square print
   corners, and a full stop that closes the name like a bottom line. */

/* Font faces: self-hosted variable fonts (SIL Open Font License 1.1, licences beside the files),
   cut down to the Latin range and to weights 400 to 700. Each URL carries the file's content hash,
   as asset() would write it, so the file is cached for a year and the preload in layout.peb names
   the same URL. AssetsTest fails when a hash here no longer matches its file. */
@font-face {
  font-display: swap;
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  src: url("../fonts/source-serif-4-latin.woff2?v=722b21198c") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  src: url("../fonts/source-sans-3-latin.woff2?v=3540537163") format("woff2");
}

:root {
  /* Typefaces. --font-figures sets the figures that are compared down a column. */
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-figures: var(--font-text);
  /* Text that is pasted character for character (URL parameters): the reader's own system
     monospace, so no third font file is downloaded. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --weight-display: 600;
  --weight-heading: 600;
  --weight-strong: 600;
  /* Between text and strong: navigation, a status, a figure in a row. */
  --weight-medium: 500;
  --tracking-display: -0.022em;
  --tracking-heading: -0.012em;

  /* Type scale. Display and section headings scale with the viewport between fixed ends. */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(2rem, 1.4rem + 2.1vw, 3rem);
  /* A headline that names its page (a guide, a legal page, a tool) and may run to six words:
     between a section's headline and the display size a slogan gets. */
  --text-3xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --text-display: clamp(2.875rem, 1.6rem + 5vw, 5.625rem);
  --leading-display: 1.03;
  --leading-heading: 1.15;
  --leading-text: 1.6;
  /* A small title or a label that may wrap to a second line. */
  --leading-title: 1.3;
  /* A lead paragraph, set larger than text. */
  --leading-lead: 1.5;
  /* Rows and lines inside the money panels (statement, calculator, plan). */
  --leading-panel: 1.4;

  /* Neutrals: cool ink on white. Every text colour passes WCAG AA on both --surface and
     --surface-tint; ink-3, the lightest, is 5.5:1 on the tint. */
  --ink: #0e1116;
  --ink-2: #3a4250;
  --ink-3: #5b6472;
  --line: #e3e6eb;
  --line-strong: #c9ced6;
  --surface: #ffffff;
  --surface-tint: #f5f6f8;

  /* The one accent: buttons, links, focus. --accent-ink is text set on the accent. */
  --accent: #1d3a72;
  --accent-hover: #284b8e;
  --accent-ink: #ffffff;

  /* Spacing scale, on a 4px base. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout. */
  --container: 76rem;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --measure: 68ch;
  /* Narrower measures: a lead paragraph beside a headline, and the note under an action. */
  --measure-lead: 34rem;
  --measure-note: 30rem;
  /* The width a panel stops at (the worked example, the plan card, a UTM channel), and with it
     whatever sits above a panel and has to line up with its edges. */
  --measure-panel: 36rem;
  --section-y: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);
  --header-height: 4rem;

  /* Heights of things a reader presses: compact (header, calculator, plan toggle), the button, and
     the button of the hero and the final call. */
  --control-sm: 2.5rem;
  --control-md: 3rem;
  --control-lg: 3.25rem;

  /* The focus ring, and its distance from what it surrounds. */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 3px;

  /* The line weight of drawn marks: the tick and the chevron. The arrows' SVG strokes equal it. */
  --stroke-mark: 1.75px;

  /* Corners. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

  /* Elevation: only the example panel and the phone install bar sit above the page. */
  --shadow-panel: 0 1px 2px rgb(14 17 22 / 0.04), 0 12px 32px -16px rgb(14 17 22 / 0.18);
  --shadow-bar: 0 -8px 24px -8px rgb(14 17 22 / 0.14);

  /* Motion. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 240ms;
}

/* The wordmark: the serif at display size, closed by a full stop in the accent. */
.wordmark {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.wordmark::after {
  color: var(--accent);
  /* Fallback for browsers without alternative text on generated content: the stop still shows. */
  content: ".";
  /* The stop is decoration: the empty alternative text keeps screen readers on "AdZoom". */
  content: "." / "";
}