:root {
  /* Layout */
  --container-max: 1280px;
  --gutter-sm: 16px;
  --gutter-md: 24px;
  --gutter-lg: 32px;

  /* Spacing scale */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Typography */
  --font-body: "Inter", system-ui, sans-serif;
  --font-heading: "Pilat Wide", sans-serif;

  /* Colours */
  --color-text: #1e1e1e;
  --color-muted: #6b6b6b;
  --color-bg: #ffffff;
  --color-primary: #8dc63f;
  --color-dark: #111111;

  /* UI */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Home page design tokens - derived from rendered output.
     Distinct namespace from the color, radius, and space scale
     above, which is largely unused on the home page. */

  /* Brand green - canonical, per brand guide */
  --mc-green: #8DC63F;
  --mc-green-80: rgba(141, 198, 63, 0.8);
  --mc-green-70: rgba(141, 198, 63, 0.7);
  --mc-green-60: rgba(141, 198, 63, 0.6);
  --mc-green-50: rgba(141, 198, 63, 0.5);

  /* Legacy aliases - remove after next release */
  --mc-green-card: var(--mc-green);
  --mc-green-feature: var(--mc-green);
  --mc-green-action: var(--mc-green);
  --mc-accent: var(--mc-green);

  /* Dark surfaces */
  --mc-charcoal: #1f1a1d;
  --mc-near-black: #111111;
  --mc-ink: #0b0b0b;
  --mc-black: #000000;
  --mc-white: #ffffff;

  /* Light/neutral surfaces (lightest to darkest) */
  --mc-grey-50: #f5f5f5;
  --mc-grey-100: #f3f3f3;
  --mc-grey-200: #f1f1f1;
  --mc-grey-300: #efefef;
  --mc-grey-400: #dcdcdc;

  /* Supporting text */
  --mc-text-copy: #333333;

  /* Validation / error */
  --mc-error: #e05252;
  --mc-error-rgb: 224, 82, 82;

  /* Border radii */
  --mc-radius-btn: 4px;
  --mc-radius-pill: 999px;
  --mc-radius-card: 14px;

  /* Shadows */
  --mc-shadow-card: 0 10px 24px rgba(0, 0, 0, 0.14);
  --mc-shadow-card-hover: 0 18px 40px rgba(0, 0, 0, 0.16);
  --mc-shadow-project: 0 20px 50px rgba(0, 0, 0, 0.22);
  --mc-shadow-cta-card: 0 24px 60px rgba(0, 0, 0, 0.25);

  /* Layout */
  --mc-container: 1380px;
  --mc-container-wide: 1680px;
  --mc-gutter: clamp(24px, 5vw, 72px);
}