/* REI Marketing Pro — "Bright Horizon" design tokens.
   The five brand colours are used exactly; everything else is a tint of them.
   White is the dominant surface. Blue (#2AA9DC) drives action, turquoise (#00DBB0) accents,
   deep blue (#1E4988) carries headings, secondary blue (#2F5AA8) supports and fills gradients. */

@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-latin.woff2') format('woff2'); font-weight: 500 800; font-display: swap; }
/* Metric-matched local fallbacks: text keeps its size/line breaks while the webfonts load (no layout shift). */
@font-face { font-family: 'Manrope Fallback'; src: local('Arial'); size-adjust: 103%; ascent-override: 103%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  /* Brand (exact) */
  --blue: #2AA9DC;        /* primary: CTAs, links, highlights */
  --teal: #00DBB0;        /* accent: icons, badges, decoration */
  --deep: #1E4988;        /* headings, important text */
  --blue-2: #2F5AA8;      /* secondary: supporting blocks, gradients */
  --white: #FFFFFF;

  /* Tints (derived only from brand colours) */
  --blue-50: #F2FAFD;
  --blue-100: #E3F4FB;
  --blue-200: #C5E8F6;
  --teal-50: #EEFCF8;
  --teal-100: #D4F8EF;
  --deep-50: #F3F6FB;
  --deep-100: #E4EBF5;
  --link: #1F8EBE;        /* #2AA9DC darkened for AA-legible small link text on white */
  --teal-ink: #007A63;    /* turquoise text on white (AA) */

  /* Text */
  --ink: #1E4988;          /* headings */
  --text: #26395E;         /* body: deep blue mixed toward neutral for long reading */
  --text-2: #4D5F7F;
  --text-3: #6E7E99;
  --line: #E3EBF5;
  --line-2: #CFDCEC;

  /* Gradients */
  --g-cta: linear-gradient(120deg, #2AA9DC 0%, #2F5AA8 100%);
  --g-cta-hover: linear-gradient(120deg, #2F5AA8 0%, #1E4988 100%);
  --g-text: linear-gradient(100deg, #2F5AA8 0%, #2AA9DC 55%, #00B894 100%);
  --g-accent: linear-gradient(120deg, #2AA9DC 0%, #00DBB0 100%);
  --g-panel: linear-gradient(135deg, #2F5AA8 0%, #2AA9DC 100%);
  --g-soft: linear-gradient(180deg, #F2FAFD 0%, #FFFFFF 100%);

  /* Type */
  --font-head: 'Manrope', 'Manrope Fallback', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h5: 1.125rem;
  --fs-h4: clamp(1.15rem, 1.05rem + .45vw, 1.375rem);
  --fs-h3: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2vw, 3rem);
  --fs-h1: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem);

  /* Space & shape */
  --container: 1240px;
  --gutter: clamp(1rem, .55rem + 2vw, 2rem);
  --section: clamp(4.25rem, 3rem + 4.8vw, 7.5rem);
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Elevation (blue-tinted shadows, never grey/black) */
  --sh-1: 0 1px 2px rgba(30, 73, 136, .06), 0 4px 14px rgba(30, 73, 136, .05);
  --sh-2: 0 14px 36px -14px rgba(30, 73, 136, .22);
  --sh-3: 0 34px 70px -30px rgba(30, 73, 136, .38);
  --sh-cta: 0 14px 30px -12px rgba(42, 169, 220, .65);
  --ring: 0 0 0 4px rgba(42, 169, 220, .25);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t: .35s;

  --header-h: 84px;
}