:root {
  /* === BRAND COLOURS (from logo) === */
  --teal:        #1a5c7a;   /* deep teal – main brand */
  --teal-dark:   #134a61;   /* darker teal for hover/depth */
  --teal-mid:    #1e7096;   /* mid teal */
  --sky:         #2196c4;   /* bright sky blue – accent */
  --sky-light:   #45aad4;   /* lighter sky */
  --sky-bg:      #eaf6fc;   /* very light sky tint */
  --teal-bg:     #e8f4f8;   /* very light teal tint */

  /* === NEUTRALS === */
  --white:   #ffffff;
  --off:     #f7f9fb;       /* near-white page bg for alt sections */
  --light:   #eef2f5;       /* light grey */
  --border:  #dde4ea;       /* borders */
  --muted:   #6b7a8d;       /* body text muted */
  --body:    #3d4a5c;       /* main body text */
  --dark:    #1a2533;       /* headings */
  --ink:     #111820;       /* darkest – footer */

  --success: #16a34a;
  --error:   #dc2626;

  /* === GRADIENTS === */
  --grad-brand:  linear-gradient(135deg, #134a61 0%, #1a5c7a 50%, #1e7096 100%);
  --grad-sky:    linear-gradient(135deg, #1a5c7a 0%, #2196c4 100%);
  --grad-hero:   linear-gradient(160deg, #0e3d52 0%, #1a5c7a 50%, #1e7096 100%);

  /* === TYPOGRAPHY === */
  --font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;

  /* === SPACING === */
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem;    --sp-10:2.5rem;
  --sp-12:3rem;   --sp-16:4rem;  --sp-20:5rem;    --sp-24:6rem;

  /* === RADII === */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-pill:999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 4px rgba(26,92,122,0.07);
  --shadow-md: 0 4px 16px rgba(26,92,122,0.09);
  --shadow-lg: 0 8px 32px rgba(26,92,122,0.11);
  --shadow-xl: 0 16px 48px rgba(26,92,122,0.13);

  --ease-out:    cubic-bezier(0.22,1,0.36,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

  --container: 1160px;
  --nav-h: 72px;
}