@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600&display=swap');

:root {
  /* Colour palette definitions */
  --blue-light:  #a2cbe3;
  --blue-med:    #4a90e2;
  --blue-dark:   #003f6b;
  --text:        #1a1a1a;

  /* Actual applied variables */
  --bg:          #ffffff;
  --link:        var(--blue-med);
  --accent:      var(--blue-light);
  --header-bg:   var(--blue-dark);
  --footer-bg:   var(--blue-dark);

  /* Font choice */
  --font-body:   'Lexend', sans-serif;
}
/* Apply globally */
body {
  background-color: var(--bg);
  color:           var(--text);
  font-family:     var(--font-body);
  line-height:     1.6;
}

/* Links & buttons */
a, .button {
  color: var(--link);
}
.button-primary {
  background-color: var(--blue-med);
  border-color:     var(--blue-med);
  color:             #fff;
}
.button-primary:hover {
  background-color: var(--blue-light);
  border-color:     var(--blue-light);
}

/* Header & footer */
.site-header, .site-footer {
  background-color: var(--header-bg);
  color:            #fff;
}
.site-header a, .site-footer a {
  color:            #fff;
}

/* Ribbons or accent blocks */
.ribbon-primary, .hero-ribbon, h1 span {
  background-color: var(--accent);
  color:            var(--text);
}

/* Dyslexia-friendly tweaks */
p, li, h1, h2, h3, h4, h5 {
  word-spacing:  0.15em;
  letter-spacing:0.02em;
}

/* Smooth transitions for theme toggles (if you implement dark mode later) */
* {
  transition: background-color .3s, color .3s;
}