/* Design tokens: the ONLY place colors, spacing and type sizes are defined.
   Everything else refers to these with var(--name), so a brand change is one edit. */
:root {
  /* Brand (taken from the logo) */
  --color-slate: #343c47;
  --color-crimson: #a3122e;
  --color-crimson-dark: #820e24;

  /* Surfaces and text */
  --color-bg: #ffffff;
  --color-bg-soft: #f3f4f6;
  --color-text: #2a313a;
  --color-muted: #5d6671;
  --color-border: #d9dde2;
  --color-on-dark: #f3f4f6;

  /* Type */
  --font-body: "Cairo", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  --text-hero: clamp(1.9rem, 1.2rem + 3.2vw, 3.25rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* Shape and layout */
  --radius: 8px;
  --container: 72rem;
  --header-height: 4.25rem;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.06);
}