/* WHD design tokens. Source: Figma "Website Redesign" (desktop 568:6126 / mobile 531:16213).
   Fluid tokens clamp() over 390-1512px. Unlayered: WP/Woo/Elementor ship unlayered CSS
   which beats any @layer. Custom properties only. */

:root {
  /* ── Colour — hsl baseline (exact from Figma hex) ───────── */
  --color-base: hsl(203 80% 98%); /* #F6FBFE page bg */
  --color-base-0: hsl(0 0% 100%); /* #FFFFFF cards / white */
  --color-base-1: hsl(198 77% 95%); /* #E8F6FC soft cyan surface */
  --color-base-2: hsl(201 69% 90%); /* #D4EBF7 borders / pills */
  --color-contrast: hsl(213 100% 9%); /* #00152E body text */
  --color-contrast-1: hsl(212 96% 27%); /* #033F85 headings, primary */
  --color-contrast-2: hsl(212 70% 45%); /* #226DC3 links, secondary */
  --color-accent-blue: hsl(199 79% 45%); /* #1893CC mid-blue accent */
  --color-accent-blue-on-contrast: hsl(196 84% 57%); /* #36BCEE bright cyan */
  --color-accent-blue-30: hsl(196 84% 57% / 0.3); /* #36BCEE4D */
  --color-accent-orange: hsl(26 98% 61%); /* #FD903A CTA */
  --color-neutral: hsl(210 10% 32%); /* #495159 muted text */

  /* Derived hover shade (hsl fallback; oklch relative override below) */
  --color-contrast-1-hover: hsl(212 96% 20%);

  /* ── Typography ─────────────────────────────────────────── */
  --font-family-body: "Inclusive Sans", system-ui, sans-serif;
  --font-family-heading: "Inclusive Sans", system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-heading: 670; /* Figma variable-font axis */
  --font-weight-bold: 700;

  /* Fluid heading scale — clamp(mobile, preferred, desktop) */
  --font-size-4xl: clamp(3rem, 2.75rem + 1.02vw, 3.72rem); /* hero 48→59.5 */
  --font-size-3xl: clamp(2.4375rem, 2.29rem + 0.61vw, 2.8625rem); /* h1 39→45.8 */
  --font-size-2xl: clamp(1.9375rem, 1.85rem + 0.37vw, 2.2rem); /* h2 31→35.2 */
  --font-size-xl: clamp(1.5625rem, 1.5169rem + 0.187vw, 1.6938rem); /* h3 25→27.1 */
  --font-size-lg: clamp(1.25rem, 1.23rem + 0.07vw, 1.3rem); /* h4 20→20.8 */

  /* Static body scale */
  --font-size-md: 1.125rem; /* 18 — lead / lg body */
  --font-size-base: 1rem; /* 16 — body */
  --font-size-sm: 0.875rem; /* 14 — body 2 / meta */
  --font-size-xs: 0.77rem; /* 12.3 — captions / eyebrow */

  --line-height-tight: 1.05; /* hero */
  --line-height-heading: 1.2; /* h1–h2 */
  --line-height-snug: 1.3; /* h3–h4 */
  --line-height-base: 1.5; /* body (24/16) */

  --letter-spacing-tight: -0.04em; /* hero */
  --letter-spacing-heading: -0.01em; /* headings */
  --letter-spacing-wide: 0.1em; /* eyebrow / all-caps */

  /* ── Spacing — static scale (identical in both Figma modes) ─ */
  --space-2xs: 0.2375rem; /* 3.8 */
  --space-xs: 0.375rem; /* 6 */
  --space-sm: 0.62rem; /* 9.9 */
  --space-md: 1rem; /* 16 */
  --space-lg: 1.62rem; /* 25.9 */
  --space-xl: 2.62rem; /* 41.9 */
  --space-2xl: 4.24rem; /* 67.8 */
  --space-3xl: 6.8625rem; /* 109.8 */

  /* ── Spacing — fluid scale (mobile→desktop mode) ─────────── */
  --space-fluid-sm: clamp(1rem, 0.83rem + 0.71vw, 1.5rem); /* 16→24 */
  --space-fluid-md: clamp(1.5rem, 1.15rem + 1.43vw, 2.5rem); /* 24→40 */
  --space-fluid-lg: clamp(2.5rem, 1.81rem + 2.85vw, 4.5rem); /* 40→72 */
  --space-fluid-xl: clamp(3.5rem, 2.63rem + 3.57vw, 6rem); /* 56→96 */
  --space-fluid-2xl: clamp(4.5rem, 3.28rem + 4.99vw, 8rem); /* 72→128 */
  --space-edge: clamp(1rem, -0.13rem + 4.63vw, 4.25rem); /* 16→68 gutter */
  --space-gap: clamp(1.75rem, 1.49rem + 1.07vw, 2.5rem); /* 28→40 grid gap */

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm: 0.75rem;
  --radius-md: 1.5rem;
  --radius-lg: 3rem;
  --radius-btn: 1.7rem;

  /* ── Elevation ──────────────────────────────────────────── */
  --shadow-elevation-low: 0 4px 24px hsl(212 96% 27% / 0.08);
  --shadow-elevation-medium: 0 10px 32px hsl(212 96% 27% / 0.16);

  /* ── Layout widths ──────────────────────────────────────── */
  --width-content: 86rem;
  /* Edge-bleeding elements must use this, not --width-content, or they overshoot by the gutter. */
  --width-frame: calc(var(--width-content) + 2 * var(--space-edge));
  --width-prose: 50rem;

  /* ── Motion ─────────────────────────────────────────────── */
  --transition: 150ms ease;
  --transition-slow: 250ms ease;
}

/* Exact oklch where supported; hsl baseline above is the fallback. */
@supports (color: oklch(0% 0 0)) {
  :root {
    --color-base: oklch(0.9852 0.0067 233.64);
    --color-base-0: oklch(1 0 0);
    --color-base-1: oklch(0.9645 0.0169 225.19);
    --color-base-2: oklch(0.9268 0.0293 230.3);
    --color-contrast: oklch(0.1949 0.0585 252.1);
    --color-contrast-1: oklch(0.3785 0.1302 256.82);
    --color-contrast-2: oklch(0.5361 0.1523 254.9);
    --color-accent-blue: oklch(0.6281 0.1298 236.17);
    --color-accent-blue-on-contrast: oklch(0.7462 0.1316 228.27);
    --color-accent-blue-30: oklch(0.7462 0.1316 228.27 / 0.3);
    --color-accent-orange: oklch(0.7567 0.1626 54.73);
    --color-neutral: oklch(0.4308 0.0168 248.22);
  }
}

/* Relative-colour hover derivations; overrides the static fallback above. */
@supports (color: oklch(from red l c h)) {
  :root {
    --color-contrast-1-hover: oklch(from var(--color-contrast-1) calc(l - 0.08) c h);
  }
}