/* ==========================================================================
   reteam group – design tokens
   Colour scales are derived from the current reteamgroup.com palette:
   accent #2ea3f2, numbers #629fe5, gallery teal #82c0c7, greys #333/#666/#eee.
   In Umbraco these can later be exposed as site settings (e.g. accent colour).
   ========================================================================== */

:root {
  /* Brand blue – base 500 is the current site accent */
  --blue-50: #eef7fe;
  --blue-100: #d8eefd;
  --blue-200: #b0dcfa;
  --blue-300: #7fc7f7;
  --blue-400: #4fb3f4;
  --blue-500: #2ea3f2;
  --blue-600: #1a87d1;
  --blue-700: #176aa6; /* ≈ logo oval blue – AA contrast on white */
  --blue-800: #14517e;
  --blue-900: #0f3a5a;
  --blue-950: #0a2438;

  --sky-400: #629fe5; /* current site counter colour */
  --teal-300: #82c0c7; /* current site gallery accent */
  --teal-600: #3d8a93;

  /* Neutrals – current site greys */
  --grey-950: #1b1d1f;
  --grey-900: #232527;
  --grey-800: #333;
  --grey-700: #4e4e4e;
  --grey-600: #666;
  --grey-500: #999;
  --grey-400: #bbb;
  --grey-300: #ddd;
  --grey-200: #eee;
  --grey-100: #f4f4f4;
  --grey-50: #f9f9f8;
  --white: #fff;

  /* Semantic roles */
  --color-bg: var(--white);
  --color-bg-soft: var(--grey-50);
  --color-bg-tint: var(--blue-50);
  --color-bg-inverse: var(--blue-950);
  --color-heading: var(--grey-900);
  --color-text: var(--grey-800);
  --color-text-muted: var(--grey-600);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: rgb(255 255 255 / 0.72);
  --color-accent: var(--blue-500);
  --color-accent-strong: var(--blue-700);
  --color-link: var(--blue-700);
  --color-link-hover: var(--blue-800);
  --color-border: var(--grey-200);
  --color-border-strong: var(--grey-300);
  --color-focus: var(--blue-500);

  /* Typography */
  --font-display: "Manrope Variable", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.55rem + 2.6vw, 3.6rem);
  --step-5: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.12em;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --section-space: clamp(4rem, 2.8rem + 5.5vw, 8rem);

  /* Layout */
  --container: 76rem;
  --container-narrow: 48rem;
  --gutter: clamp(1rem, 0.5rem + 2.6vw, 2.5rem);
  --header-height: 4.75rem;

  /* Shape & depth */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(10 36 56 / 0.06), 0 2px 8px rgb(10 36 56 / 0.05);
  --shadow-md: 0 4px 12px rgb(10 36 56 / 0.06), 0 16px 40px rgb(10 36 56 / 0.08);
  --shadow-lg: 0 10px 30px rgb(10 36 56 / 0.1), 0 30px 80px rgb(10 36 56 / 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration: 280ms;
  --duration-slow: 700ms;
}