:root {
  --color-primary-light: 167 193 168;   /* #A7C1A8 - soft sage */
  --color-primary:       129 154 145;   /* #819A91 - sage grey */
  --color-primary-sdark: 106 127 121;   /* #6A7F79 */
  --color-primary-dark:   82 102  96;   /* #526660 */

  --color-dprimary-light:  32  48  43;  /* #20302B */
  --color-dprimary:        30  46  43;  /* #1E2E2B */
  --color-dprimary-dark:   20  33  31;  /* #14211F */

  --color-selected-light: 238 239 224;  /* #EEEFE0 - pale cream */
  --color-selected:       209 216 190;  /* #D1D8BE - muted sage */
  --color-selected-dark:  184 194 164;  /* #B8C2A4 */

  --color-secondary-light: 167 193 168; /* #A7C1A8 */
  --color-secondary:       129 154 145; /* #819A91 */
  --color-secondary-dark:  106 127 121; /* #6A7F79 */

  --color-accent-light: 238 239 224;    /* #EEEFE0 */
  --color-accent:       209 216 190;    /* #D1D8BE */
  --color-accent-dark:  184 194 164;    /* #B8C2A4 */

  --color-neutral-light:  245 245 245;  /* #F5F5F5 */
  --color-neutral-subtle: 240 240 240;  /* #F0F0F0 */
  --color-neutral:        158 158 158;  /* #9E9E9E */
  --color-neutral-dark:    97  97  97;  /* #616161 */
}

/* Councillor at Work section */
.councillor-at-work {
  background-color: #cfe8db;
}
.dark .councillor-at-work {
  background-color: #1e3b2f;
}

/* News section — dark mode distinct background */
.dark .news-cards-section {
  background-color: rgb(var(--color-dprimary-dark) / 1);
  color: white;
}

/* Hero mesh gradient — light mode */
.hero-mesh-gradient {
  --_gradient-blend-mode: normal;
  --_gradient-blur: 200px;
  background:
    radial-gradient(at 26.4%   7%,   #FFFFFF 0px, transparent 50%),
    radial-gradient(at 79.7% 100%,   #ADFFA8 0px, transparent 50%),
    radial-gradient(at 100%    0%,   #FCEF8B 0px, transparent 50%)
    #C7D1CD;
  mix-blend-mode: var(--_gradient-blend-mode);
}

/* Hero mesh gradient — dark mode */
.dark .hero-mesh-gradient {
  background:
    radial-gradient(at 25.4%   6.2%, #526660 0px, transparent 50%),
    radial-gradient(at 79.7% 100%,   #489E44 0px, transparent 50%),
    radial-gradient(at 100%    0%,   #615A28 0px, transparent 50%)
    #0A120F;
}

/* Banner colours — header strip + section banner */
.header-event-banner,
.upcoming-event-banner {
  background-color: #ffc300 !important;
  border-bottom-color: #d9a800 !important;
}
.dark .header-event-banner {
  background-color: #cc9b00 !important;
  border-bottom-color: #b38600 !important;
}
.dark .upcoming-event-banner {
  background-color: #cc9b00 !important;
  border-bottom-color: #b38600 !important;
}
.header-event-banner > div:first-child p {
  color: #1a1a1a !important;
}
.dark .header-event-banner > div:first-child p {
  color: #ffffff !important;
}

/* Frosted backdrop for hero content */
.frosted-backdrop {
  backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
  -webkit-backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
}