/* =============================================================
   Design tokens
   Mirrors the Figma variables (colors, spacing, radius, type).
   Update values here and they propagate across the stylesheet.
   ============================================================= */

:root {
  /* ---- Color palette (Figma colour variables) ---- */
  --color-primary-25: #464039; /* Primary 25  — headings */
  --color-primary-88: #e3dede; /* Primary 88  — thumbnail surface */
  --color-primary-92: #ebebea; /* Primary 92  — active nav pill */
  --color-primary-98: #fafafa; /* Primary 98  — page background */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-accent: #005574; /* Accent — buttons & links */
  --color-accent-strong: #00405a; /* hover state, derived */

  /* ---- Semantic colours ---- */
  --bg: var(--color-primary-98);
  --surface: var(--color-white);
  --text: var(--color-black);
  --heading: var(--color-primary-25);
  --thumbnail-bg: var(--color-primary-88);
  --nav-active-bg: var(--color-primary-92);

  /* ---- Radius ---- */
  --radius-standard: 16px; /* corner-radius-standard */
  --radius-media: 32px;    /* case-study thumbnails */

  /* ---- Elevation ---- */
  --shadow-standard: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow Standard */

  /* ---- Spacing (Figma spacing variables, made fluid) ---- */
  --margin-side: clamp(24px, 5vw, 60px);        /* margin-side-desktop: 60 */
  --margin-topbottom: clamp(24px, 3.5vw, 40px); /* margin-topbottom-desktop: 40 */
  --gap-xxs: 24px;                              /* gap-xxs: 24 */
  --gap-xs: 40px;                               /* gap-xs: 40 */
  --gap-s: clamp(48px, 6vw, 80px);             /* gap-s: 80 */
  --gap-m: clamp(64px, 8vw, 120px);            /* gap-m: 120 */
  --gap-l: clamp(80px, 10vw, 160px);            /* gap-l: 160 — section rhythm */
  --grid-gutter: 24px;                          /* 12-column layout grid gutter */

  /* Shared content container — header, main and footer align to this width,
     with flexible outer margins beyond it. */
  --content-max: 1560px;

  /* ---- Typography ---- */
  --font-family: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Fluid type scale: mobile (390px) → desktop (1440px)
     Floors match the Mobile/* text styles; ceilings match desktop. */
  --fs-h1: clamp(2.5rem, 2.036rem + 1.905vw, 3.75rem);        /* 40 → 60 */
  --fs-h2: clamp(2rem, 1.629rem + 1.524vw, 3rem);             /* 32 → 48 */
  --fs-h3: clamp(1.625rem, 1.486rem + 0.571vw, 2rem);        /* 26 → 32 */
  --fs-paragraph-large: clamp(1.5rem, 1.407rem + 0.381vw, 1.75rem);/* 24 → 28 */
  --fs-paragraph: clamp(1.125rem, 1.032rem + 0.381vw, 1.375rem);/* 18 → 22 */
  --fs-contact: clamp(1.25rem, 1.02rem + 0.94vw, 1.75rem);    /* 20 → 28 */
  --fs-footer: clamp(1.125rem, 1.0rem + 0.52vw, 1.5rem);      /* 18 → 24 */
  --fs-nav: clamp(1rem, 0.93rem + 0.29vw, 1.25rem);           /* 16 → 20 */
}