:root {
  --color-red: #ff3355; /* MAIN. The signature colour, typically present once in a view. Punchy; built for impact at display size, on buttons and in the logo. Like the blue it gets heavy if used too much — use it in concert with the rest of the primary palette and the secondaries. For small red text, or red on cream, use red-deep. */
  --color-blue: #232a59; /* PRIMARY. The voice of the brand: text, headings, dark bands. Confident and plain. On its own it can feel dominant and unemotional — let the secondaries warm it. */
  --color-grey-100: #ebeff5; /* PRIMARY. The page background. Space is part of the brand — use plenty. Also quiet containment: panels that should recede. */
  --color-grey-300: #c5cdd7; /* PRIMARY. For structure without weight: rules, borders, dividers. */
  --color-grey-500: #8994a3; /* PRIMARY. For stepping back: secondary text, inactive items, metadata. */
  --color-white: #ffffff; /* PRIMARY. Sits on top of the page for contrast and accent: panels, buttons, cards, layered backgrounds. Rarely the page itself. */
  --color-sky: #8bc5ff; /* SECONDARY. For accent, impact and emotion. Airy, open, optimistic. */
  --color-pink: #ffa5b4; /* SECONDARY. For accent, impact and emotion. Warm, human, playful. */
  --color-green: #97ffa0; /* SECONDARY. For accent, impact and emotion. Energetic, alive, a little electric. */
  --color-aqua: #97ffe7; /* SECONDARY. For accent, impact and emotion. Cool, fresh, clean. */
  --color-cream: #fffaef; /* TERTIARY. Sparingly and deliberately, in concert with the display faces and alongside primary and secondary colour — for an organic, human, inky, papery feel. */
  --color-signal-green: #03e916; /* UTILITY. A signal, not a colour: live, on, active. Dots and small indicators only. */
  --color-red-deep: #e91337; /* UTILITY. The darker red, for contrast: small red text, red on cream, and the red button (white text on it reaches 4.55:1 where the main red does not). */
  --color-crimson: #951d45; /* UTILITY. Depth behind red — the dark end of the stepped red gradient. */
  --color-yellow: #ffe88c; /* UTILITY. A small highlight or tag when the secondaries are already spoken for. */
  --color-black: #000000; /* UTILITY. Hard edges only — icon strokes, the odd glyph. Never text blocks or surfaces. */
  --color-text-default: var(--color-blue);
  --color-text-muted: var(--color-grey-500);
  --color-text-inverse: var(--color-white); /* On blue surfaces. */
  --color-text-inverse-muted: var(--color-grey-300);
  --color-text-brand: var(--color-red); /* Display headline or one CTA. Sparingly. At body size, or on cream, use text.brand-deep. */
  --color-text-link: var(--color-blue);
  --color-text-link-hover: var(--color-red-deep);
  --color-text-brand-deep: var(--color-red-deep); /* Red that must be read small, or sit on cream. */
  --color-surface-page: var(--color-grey-100); /* The page. Grey 100, not white. */
  --color-surface-raised: var(--color-white); /* Panels, cards, buttons and layered backgrounds sitting on the page. */
  --color-surface-display: var(--color-cream); /* Hero / display areas only. */
  --color-surface-inverse: var(--color-blue); /* Footers, dark bands. */
  --color-surface-feature-green: var(--color-green); /* Developer / build sections. Text on it is text.default. */
  --color-surface-feature-sky: var(--color-sky); /* Gradient start, fading to surface.page. */
  --color-border-default: var(--color-grey-300);
  --color-border-subtle: var(--color-white); /* A white rule on the grey page. */
  --color-chip-neutral: var(--color-grey-300);
  --color-chip-sky: var(--color-sky);
  --color-chip-pink: var(--color-pink);
  --color-chip-green: var(--color-green);
  --color-chip-aqua: var(--color-aqua);
  --color-chip-yellow: var(--color-yellow);
  --color-chip-selected-bg: var(--color-blue);
  --color-chip-selected-text: var(--color-white);
  --color-action-primary-bg: var(--color-blue);
  --color-action-primary-text: var(--color-white);
  --color-action-secondary-bg: var(--color-white);
  --color-action-secondary-text: var(--color-blue);
  --color-action-secondary-border: var(--color-grey-300);
  --color-action-brand-bg: var(--color-red-deep); /* The one red button in a view. Red-deep, not the main red: white 13px text needs 4.5:1, and red-deep gives 4.55:1 where the main red manages 3.59:1. */
  --color-action-brand-text: var(--color-white);
  --color-action-hollow-border: var(--color-blue);
  --color-action-hollow-text: var(--color-blue);
  --color-action-hover-bg: var(--color-aqua); /* Hover fill for every button. */
  --color-action-hover-text: var(--color-blue);
  --color-action-hover-border: var(--color-aqua); /* Border matches the fill — no outline on hover. */
  --color-status-live: var(--color-green); /* Something is on, running, live. The dot is the secondary green. */
  --color-status-live-pulse: var(--color-signal-green); /* The radiating pulse behind a live dot — the only place signal green appears here. */
  --color-status-attention: var(--color-sky); /* Something is new or worth noticing. */
  --color-gradient-red-start: var(--color-red);
  --color-gradient-red-end: var(--color-crimson);
  --opacity-state: 0.8; /* A state change on an existing colour — hover, pressed, disabled — without introducing a new colour. */
  --opacity-rule: 0.25; /* Hairlines and dividers made from a palette colour, so they sit quietly on any surface. */
  --opacity-tint: 0.1; /* A wash of a palette colour behind something, or a soft layer over an image. */
  --radius-button: 6px; /* One radius for every button, both voices, both heights. */
  --radius-pill: 999px; /* Chips. */
  --radius-panel: 6px; /* Cards, tiles, the status pill. */
  --size-button-tall-y: 8px; /* Tall button vertical padding. The default. */
  --size-button-tall-x: 15px;
  --size-button-short-y: 5px; /* Short button — dense UI, inline actions. */
  --size-button-short-x: 12px;
  --size-status-dot: 12px;
  --size-status-pill-y: 5px;
  --size-status-pill-right: 8px;
  --size-status-pill-left: 7px;
  --size-status-pill-gap: 10px; /* Between the dot and the text. */
  --size-chip-y: 6px;
  --size-chip-x: 12px;
  --size-status-pulse: 8px; /* How far the live pulse radiates. */
  --size-rule: 1px; /* Hairlines: quote rules, button borders. */
  --size-quote-indent: 24px; /* Pull quote: gap between the rule and the text. */
  --font-family-primary: Method, Inter, sans-serif; /* The chief brand font and the display hero. Every heading, at every size, including the biggest. Regular by default, Medium for emphasis, Light rarely. */
  --font-family-display-raster: "FK Raster Roman Compact", "FK Roman Standard", serif; /* FK Raster Roman Compact — always the Blended cut. In display: very sparingly, for impact or motivation. Beyond display: sparingly, for a smaller headline or label that relates to the theme. */
  --font-family-display-serif: "FK Roman Standard", Georgia, serif; /* FK Roman Standard. Display only, sparingly — a serif counterpoint for a hero or one section headline. */
  --font-family-body: Inter, system-ui, sans-serif; /* Body copy and UI text. */
  --font-family-mono: "IBM Plex Mono", ui-monospace, monospace; /* Uppercase eyebrows, labels and chips, code, and display-style quote blocks / italic pull quotes. */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-display: clamp(72px, 9vw, 160px); /* Display styles have no fixed size — set them as large as the space allows (typically 90–160px on desktop). This fluid value is a sensible default, not a rule. */
  --font-size-xs: 13px;
  --font-size-sm: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-3xl: 32px;
  --font-size-4xl: 42px;
  --font-size-5xl: 62px;
  --font-size-6xl: 90px;
  --font-letter-spacing-tight: -0.04em;
  --font-letter-spacing-snug: -0.02em;
  --font-letter-spacing-normal: 0;
  --font-letter-spacing-wide: 0.1em;
  --font-letter-spacing-wider: 0.15em; /* Status pill text. */
  --font-line-height-display: 0.9; /* Display sizes only. Tight — the lines almost touch. */
  --font-line-height-tight: 1.05;
  --font-line-height-snug: 1.2;
  --font-line-height-normal: 1.3;
  --font-line-height-body: 1.5; /* Standard body copy: 24px at the 16px body size. */
  --font-line-height-relaxed: 1.55;
  --font-line-height-solid: 1; /* Status pill — the line is exactly the font size. */
}

.text-display-hero {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-display);
  letter-spacing: var(--font-letter-spacing-tight);
}
.text-display-raster {
  font-family: var(--font-family-display-raster);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-tight);
  letter-spacing: var(--font-letter-spacing-normal);
}
.text-display-serif {
  font-family: var(--font-family-display-serif);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-display);
  letter-spacing: var(--font-letter-spacing-tight);
}
.text-raster-label {
  font-family: var(--font-family-display-raster);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-tight);
  letter-spacing: var(--font-letter-spacing-wide);
}
.text-heading-xl {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-tight);
  letter-spacing: var(--font-letter-spacing-tight);
}
.text-heading-1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-snug);
}
.text-heading-2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-snug);
}
.text-heading-3 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-snug);
}
.text-statement {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-snug);
}
.text-body-lead {
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-relaxed);
  letter-spacing: var(--font-letter-spacing-normal);
}
.text-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-body);
  letter-spacing: var(--font-letter-spacing-normal);
}
.text-body-small {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-normal);
}
.text-eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-relaxed);
  letter-spacing: var(--font-letter-spacing-wide);
  text-transform: uppercase;
}
.text-chip {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-normal);
}
.text-button {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-wide);
  text-transform: uppercase;
}
.text-button-hollow {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-normal);
}
.text-code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-relaxed);
  letter-spacing: var(--font-letter-spacing-normal);
}
.text-quote {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-normal);
  font-style: italic;
}
.text-status-pill {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-solid);
  letter-spacing: var(--font-letter-spacing-wider);
  text-transform: uppercase;
}