/*
  Design tokens — the ONLY file in this template that may contain raw colour values.
  Re-theme a client by changing values here. Never override component styles.
*/
:root {
  /* Colour — surfaces */
  --c-ink: #30333f;          /* primary dark surface (page background) */
  --c-ink-raised: #3a3e4c;   /* cards / alternate dark band */
  --c-ink-deep: #23252f;     /* header, footer */
  --c-paper: #f2f3ef;        /* light section surface */
  --c-paper-line: #d9dbd3;   /* rules on light surfaces */
  --c-line: #4a4e5d;         /* rules on dark surfaces */

  /* Colour — text */
  --c-text: #ffffff;         /* text on dark: 12.6:1 on --c-ink */
  --c-text-muted: #cfd2db;   /* secondary text on dark: 8.3:1 on --c-ink, 7.0:1 on --c-ink-raised */
  --c-text-dark: #23252f;    /* text on light */
  --c-text-dark-muted: #4b4f5c; /* secondary text on light: 7.3:1 on --c-paper */

  /* Colour — brand */
  --c-brand: #86c440;        /* primary action (client brand colour goes here) */
  --c-brand-hover: #9ad35a;
  --c-on-brand: #17210b;     /* text on --c-brand: 7.9:1 */
  --c-brand-text: #b8e385;   /* brand colour as text on dark: 8.6:1 on --c-ink, 7.3:1 on --c-ink-raised */

  /* Colour — overlays and focus */
  --c-overlay: rgba(28, 30, 38, 0.62); /* photo/video overlay behind hero copy */
  --c-header-bg: rgba(35, 37, 47, 0.9); /* translucent header over a 15px backdrop blur */
  --c-control-bg: rgba(35, 37, 47, 0.72); /* video pause/play buttons over footage */
  --c-focus: #ffd24a;

  /* Type */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  --t-3xl: clamp(2rem, 1.4rem + 2.4vw, 2.875rem);
  --t-4xl: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;
  --w-black: 900;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Radii, shadow, layout */
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;
  --shadow-1: 0 12px 32px rgba(10, 11, 16, 0.28);
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 76px;
  --hero-min: clamp(520px, 78vh, 760px);
  --tap: 44px;
  --icon-lg: 64px;           /* audience line icons */

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-fast: 0.15s;
  --dur: 0.3s;
  --dur-draw: 0.9s;
  --blur: 15px;
  --nudge: 10px;             /* hover slide distance for headings and link arrows */
  --lift: -12px;             /* card lift on hover */
}