/* Design tokens — colours sampled from assets/logo/logo.jpg */
:root {
  /* Brand */
  --color-navy: #183553;
  --color-navy-dark: #10253b;
  --color-navy-deep: #0b1a2a;
  --color-orange: #cf6a45;
  --color-orange-dark: #b4532f;
  --color-orange-light: #f3ddd3;

  /* Neutrals */
  --color-white: #ffffff;
  --color-bg: #f6f7f9;
  --color-text: #1d2733;
  --color-text-muted: #5b6673;
  --color-border: #e2e6eb;
  --color-error: #b3261e;

  /* Semantic */
  --color-primary: var(--color-navy);
  --color-accent: var(--color-orange);
  --color-footer: var(--color-navy-dark);
  --color-subfooter: var(--color-navy-deep);

  /* Typography */
  --font-heading: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-hero: clamp(2.5rem, 7vw, 4rem);
  --lh-tight: 1.2;
  --lh-body: 1.6;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --container-width: 72rem;
  --header-height: 5.5rem;

  /* Effects */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-icon: 0 10px 24px rgba(24, 53, 83, 0.18);
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);
  --transition: 200ms ease;
}