/* Design tokens — colours sampled from assets/logo/logo.jpg */
:root {
  /* Brand */
  --color-orange: #f36c1c;
  --color-orange-dark: #d65a10;
  --color-orange-light: #fde6d6;
  --color-charcoal: #3a3a3c;
  --color-charcoal-dark: #262628;
  --color-charcoal-deep: #1c1c1e;

  /* Neutrals */
  --color-white: #ffffff;
  --color-grey-100: #f4f4f4;
  --color-grey-200: #dedede;
  --color-grey-500: #6e6e73;
  --color-error: #c0262d;

  /* Roles */
  --color-text: var(--color-charcoal);
  --color-text-inverse: var(--color-white);
  --color-accent: var(--color-orange);
  --color-surface: var(--color-white);
  --color-surface-muted: var(--color-grey-200);

  /* Typography */
  --font-sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", "Arial Black", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-hero: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* 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-max: 72rem;
  --container-narrow: 48rem;
  --header-height: 4.5rem;

  /* Misc */
  --radius-sm: 4px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 10px rgb(0 0 0 / 0.08);
  --transition: 200ms ease;
}