:root {
  /*
   * Colour palette — matched to MK Varda logo (June 2026)
   * Logo colours:
   *   MK lettermark:   #1e3a8a  (deep cobalt navy)
   *   Swoosh accent:   #2563eb  (bright mid-blue)
   *   Wordmark "MK":   #2d52a0  (mid navy)
   *   Wordmark "VARDA":#3d5a8a  (muted slate navy)
   *   Background:      #000000  (pure black)
   */

  /* Core */
  --color-ink:        #000000;   /* Logo background — pure black */
  --color-brand-blue: #1e3a8a;   /* MK lettermark — primary navy */
  --color-brand-blue-bright: #2563eb; /* Swoosh accent — for CTAs and active states */
  --color-white:      #ffffff;

  /* Surfaces */
  --color-surface:    #f5f6f9;   /* Lightest possible tint of the navy — off-white with blue undertone */
  --color-border:     #e4e7ef;   /* Soft navy-tinted border */
  --color-border-mid: #d6dae8;   /* Card borders */

  /* Text */
  --color-text-muted: #4a5568;   /* Dark slate — readable body copy */
  --color-text-light: #718096;   /* Labels, captions */
  --color-text-faint: #a0aec0;   /* Timestamps, metadata */

  /* Blue scale — all derived from logo navy */
  --color-blue-mid:   #2d52a0;   /* Wordmark "MK" colour */
  --color-blue-light: #6b8cce;   /* Lighter accent */
  --color-blue-tint:  #eef1fa;   /* Pill/badge backgrounds */

  /* Dark surfaces — pure black with navy card layers (matches logo background) */
  --color-dark-bg:         #000000;   /* Pure black — logo background */
  --color-dark-bg-alt:     #04070f;   /* Slightly lifted — section alt */
  --color-dark-card:       #0b1120;   /* Card — clearly distinct from bg */
  --color-dark-card-hover: #101828;   /* Card hover — lifted navy */
  --color-dark-text:       #ffffff;
  --color-dark-text-sub:   rgba(255,255,255,0.60);
  --color-dark-text-muted: rgba(255,255,255,0.38);
  --color-dark-text-faint: rgba(255,255,255,0.28);
  --color-dark-border:     rgba(255,255,255,0.08);
  --color-dark-border-blue: rgba(30,58,138,0.5);  /* Navy glow border */

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;

  /* Layout */
  --max-width:       960px;
  --max-width-hero:  860px;
  --section-pad-h:   20px;
  --section-pad-v:   var(--space-7);
}

@media (min-width: 768px) {
  :root {
    --section-pad-h: var(--space-5);
  }
}