:root {
  /* Canonical colour primitives. Source of truth for the website brand. */
  --al-ink: #0B0B0B;
  --al-paper: #F1EFE8;
  --al-white: #FFFFFF;
  --al-graphite: #333330;
  --al-ash: #6B6A64;
  --al-line: #D8D6CF;
  --al-signal: #BF4A16;
  --al-signal-dark: #8F3510;
  --al-signal-soft: #F6E6DE;

  /* Functional surfaces */
  --al-bg-canvas: var(--al-paper);
  --al-bg-surface: var(--al-white);
  --al-bg-inverse: var(--al-ink);
  --al-bg-accent-soft: var(--al-signal-soft);
  --al-bg-disabled: var(--al-line);

  /* Functional text roles - all normal-text pairs meet WCAG AA. */
  --al-text-heading: var(--al-ink);
  --al-text-body: var(--al-ink);
  --al-text-secondary: var(--al-graphite);
  --al-text-muted: var(--al-ash);
  --al-text-link: var(--al-signal-dark);
  --al-text-link-hover: var(--al-ink);
  --al-text-on-dark: var(--al-paper);
  --al-text-on-surface: var(--al-ink);
  --al-text-disabled: var(--al-ash);

  /* Brand accent for large-heading punctuation, the display word and contact email. */
  --al-accent-display: var(--al-signal);
  --al-accent-point: var(--al-signal);
  --al-selection-bg: var(--al-signal-soft);
  --al-selection-text: var(--al-ink);
  --al-focus-ring-default: var(--al-signal-dark);
  --al-focus-ring-inverse: var(--al-paper);
  --al-status-error-text: var(--al-signal-dark);
  --al-status-error-bg: var(--al-signal-soft);

  /* Rules and controls */
  --al-rule-subtle: var(--al-line);
  --al-border-default: var(--al-graphite);
  --al-border-strong: var(--al-graphite);
  --al-control-bg: var(--al-paper);
  --al-control-text: var(--al-ink);
  --al-control-border: var(--al-graphite);

  /* Typography */
  --al-font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --al-font-serif: "Instrument Serif", Georgia, serif;
  --al-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --al-weight-regular: 400;
  --al-weight-medium: 500;
  --al-weight-semibold: 600;
  --al-weight-bold: 700;

  --al-text-xs: 0.75rem;
  --al-text-sm: 0.875rem;
  --al-text-md: 1rem;
  --al-text-lg: 1.25rem;
  --al-text-xl: 1.75rem;
  --al-text-2xl: 2.5rem;
  --al-text-display: clamp(3rem, 8vw, 7.5rem);

  --al-leading-tight: 0.96;
  --al-leading-heading: 1.08;
  --al-leading-body: 1.55;
  --al-leading-ui: 1.3;
  --al-tracking-tight: -0.035em;
  --al-tracking-label: 0.12em;

  /* Spacing follows a four-pixel base without forcing every layout onto it. */
  --al-space-1: 0.25rem;
  --al-space-2: 0.5rem;
  --al-space-3: 0.75rem;
  --al-space-4: 1rem;
  --al-space-5: 1.5rem;
  --al-space-6: 2rem;
  --al-space-7: 3rem;
  --al-space-8: 4rem;
  --al-space-9: 6rem;
  --al-space-10: 8rem;

  /* Layout and interaction */
  --al-content-max: 77.5rem;
  --al-reading-max: 43rem;
  --al-touch-min: 2.75rem;
  --al-rule: 1px;
  --al-radius-sm: 0.125rem;
  --al-radius-pill: 999px;
  --al-focus-ring-width: 3px;
  --al-motion-fast: 180ms;
  --al-motion-standard: 280ms;
  --al-motion-slow: 420ms;
  --al-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
}

::selection {
  color: var(--al-selection-text);
  background: var(--al-selection-bg);
}

:focus-visible {
  outline: var(--al-focus-ring-width) solid transparent;
  outline-color: var(--al-focus-ring-default);
  outline-offset: 3px;
}

[data-al-surface="inverse"] :focus-visible {
  outline-color: var(--al-focus-ring-inverse);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --al-motion-fast: 0ms;
    --al-motion-standard: 0ms;
    --al-motion-slow: 0ms;
  }
}