/* Design tokens — brand colours sampled from the HDC logo (cyan #00A4DA, plum #73255A, grey #B4B5B4) */
:root {
  /* Plum (logo wordmark) — primary + dark sections */
  --plum-950: #1f0a19;
  --plum-900: #2b0f24;
  --plum-800: #3e1534;
  --plum-700: #5a1d4a;
  --plum-600: #73255a;
  --plum-100: #f3e8ef;
  --plum-50: #faf5f8;

  /* Cyan (logo H & C) — accent */
  --cyan-500: #00a4da;
  --cyan-600: #0090c2;
  --cyan-700: #007aa6;
  --cyan-50: #e6f6fc;

  /* Grey (logo swoosh) */
  --grey-400: #b4b5b4;

  /* Roles */
  --primary: var(--plum-600);
  --primary-hover: var(--plum-700);
  --dark: var(--plum-900);
  --accent: var(--cyan-500);
  --accent-text: var(--cyan-600); /* accent used as text on light backgrounds */

  --ink: #1d1420;
  --body: #4f4a55;
  --muted: #847d8a;
  --line: #e9e3e8;
  --surface: #ffffff;
  --surface-alt: #f8f5f7;

  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(43, 15, 36, 0.06);
  --shadow: 0 12px 32px rgba(43, 15, 36, 0.1);
  --shadow-lg: 0 24px 60px rgba(43, 15, 36, 0.18);

  --container: 1200px;
  --hh: 84px; /* sticky header height */

  /* Faint grid-line pattern used as a background texture */
  --grid-size: 56px;
  --grid-light:
    linear-gradient(rgba(115, 37, 90, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 37, 90, .055) 1px, transparent 1px);
  --grid-dark:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  --gutter: 20px;
  --section-y: clamp(64px, 9vw, 112px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}