/* ==========================================================================
   Design tokens
   Brand colours sampled directly from assets/logo/logo.png
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  /* --color-orange is the logo orange. At 2.95:1 on white it is a fill colour,
     not a text colour — use -dark for large display text (4.2:1) and -deep for
     anything at body size (5.6:1). */
  --color-orange: #fd6802;
  --color-orange-dark: #d15200;
  --color-orange-deep: #b34400;
  --color-orange-light: #ff8b3d;
  --color-orange-tint: #fff2e8;

  --color-blue: #0049fc;
  --color-blue-dark: #0034ba;
  --color-blue-tint: #eef2ff;

  --color-teal: #014355;
  --color-teal-dark: #012b38;
  --color-teal-light: #0b6b85;

  --color-sand: #ceccc1;
  --color-sand-tint: #f5f4f0;

  /* --- Neutrals --------------------------------------------------------- */
  --color-ink: #0e262e;
  --color-body: #4a5c63;
  --color-muted: #5f7176;
  --color-line: #e2e6e5;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f8f8;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Helvetica Neue", Helvetica, "Segoe UI", Roboto, system-ui,
    -apple-system, Arial, sans-serif;
  --font-display: var(--font-sans);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  --text-2xl: clamp(1.875rem, 1.2rem + 2.9vw, 3.25rem);
  --text-3xl: clamp(2rem, 1rem + 4.4vw, 4rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

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

  --section-gap: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1220px;
  --container-narrow: 680px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);

  /* --- Form & surface treatment ----------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(1 67 85 / 0.08);
  --shadow-md: 0 12px 32px -12px rgb(1 67 85 / 0.25);
  --shadow-lg: 0 28px 60px -24px rgb(1 67 85 / 0.35);

  --transition-fast: 150ms ease;
  --transition-base: 260ms cubic-bezier(0.33, 1, 0.68, 1);
}