:root {
    --block-list-padding: 2rem;
    --block-margin: 2rem;
    --border-radius: 1rem;
    --button-border-radius: 30px;
    --header-height: 112px;
    --header-desktop-padding: 68px;
    --member-header-height: 34px;
    --block-max-width: 1700px;
    /* ---------------------------------------------------------
       VCRS brand palette (Brandbook 2026)
       Raw colour values. Blocks should use the colour roles
       below rather than these directly.
       --------------------------------------------------------- */
    --white: #FFFFFF;
    --black: #000000;
    --aubergine-1: #18171C;
    --aubergine-2: #2A2833;
    --aubergine-3: #33313F;
    --aubergine-4: #AFACC2;
    --lilac: #A599DB;
    --mist-1: #F2F0F9;
    --mist-2: #DBD9E8;
    --mist-3: #DCD8F0;
    --mist-4: #615F6D;
    --violet: #69609F;
    /* Status colours, one set for dark mode and one for light mode */
    --green: #8DB372;
    --yellow: #CFC281;
    --red: #C56868;
    --blue: #7A9BB8;
    --green-light: #AECD98;
    --yellow-light: #E0D185;
    --red-light: #DD8888;
    --blue-light: #94B4D1;
    /* ---------------------------------------------------------
       Colour roles - dark mode (primary colour scheme)
       --------------------------------------------------------- */
    --color-background: var(--black);
    --color-container-1: var(--aubergine-1);
    --color-container-2: var(--aubergine-2);
    --color-container-3: var(--lilac);
    --color-text-primary: var(--white);
    --color-text-secondary: var(--aubergine-4);
    --color-text-tertiary: var(--lilac);
    --color-text-on-container-3: var(--black);
    --color-line: var(--aubergine-3);
    --color-accent: var(--lilac);
    --color-text-on-accent: var(--black);
    --color-success: var(--green);
    --color-critical: var(--red);
    --color-warning: var(--yellow);
    --color-information: var(--blue);
    /* Interaction states - not defined by the brandbook yet, placeholders */
    --color-accent-hover: var(--white);
    --color-text-on-accent-hover: var(--black);
    --color-link: var(--lilac);
    --color-hover-background: rgb(255 255 255 / 0.08);
    /* Tint on top of images to keep text readable (brandbook: 10-50% black) */
    --color-image-overlay: rgb(0 0 0 / 0.5);
    /* ---------------------------------------------------------
       Background options editors pick in block settings
       --------------------------------------------------------- */
    --background-primary: var(--color-container-1);
    --background-secondary: var(--color-container-2);
    /* ---------------------------------------------------------
       Buttons (Button Color options in the backoffice)
       --------------------------------------------------------- */
    --button-primary-background: var(--color-accent);
    --button-primary-border: var(--color-accent);
    --button-primary-text: var(--color-text-on-accent);
    --button-primary-hover-background: var(--color-accent-hover);
    --button-primary-hover-border: var(--color-accent-hover);
    --button-primary-hover-text: var(--color-text-on-accent-hover);
    --button-white-background: var(--white);
    --button-white-border: var(--white);
    --button-white-text: var(--black);
    --button-black-background: var(--aubergine-2);
    --button-black-border: var(--lilac);
    --button-black-text: var(--white);
    --button-transparent-border: var(--color-text-primary);
    --button-transparent-text: var(--color-text-primary);
    /* Buttons with "Display as link" ticked. Transparent follows the surrounding text colour. */
    --button-link-primary-text: var(--color-link);
    --button-link-white-text: var(--white);
    --button-link-black-text: var(--black);
    /* ---------------------------------------------------------
       Roadmap variables
       --------------------------------------------------------- */
    --roadmap-progress-background-color: var(--color-container-1);
    --roadmap-progress-completed-color: var(--color-accent);
    --roadmap-progress-track-color: var(--color-line);
    --roadmap-progress-line-height: 3px;
    --roadmap-complete-color: var(--color-text-primary);
    --roadmap-pending-color: var(--color-text-secondary);
    --roadmap-incomplete-color: var(--color-text-secondary);
    /* Task rows are light in dark mode too */
    --roadmap-task-background: var(--mist-1);
    --roadmap-task-hover-background: var(--mist-2);
    --roadmap-task-text-color: var(--black);
    --roadmap-task-text-secondary-color: var(--mist-4);
    /* ---------------------------------------------------------
       Contacts variables
       --------------------------------------------------------- */
    --contacts-card-width: 300px;
    --contacts-card-margin: 0.5rem;
    /* ---------------------------------------------------------
       Typography variables
       --------------------------------------------------------- */
    --text-column-max-width: 640px;
    --font-family-text: "Volvo Centum", Arial, sans-serif;
    --font-family-display: "Volvo Centum Display", "Volvo Centum", Arial, sans-serif;
    --font-family-accent: "Monobrix", "Volvo Centum", Arial, sans-serif;
    /* Brand guide: display 90-100%, intro 120%, body 130-140% */
    --line-height-display: 1.5;
    --line-height-intro: 1.2;
    --line-height-body: 1.4;
    --heading-line-height: var(--line-height-display);
    --font-size-body-text: 1rem;
    --font-size-intro: 1.5rem;
    --font-size-mobile-intro: 1.25rem;
    --font-size-jumbo: 4rem;
    --font-size-h1: 2rem;
    --font-size-h2: 2rem;
    --font-size-h3: 2rem;
    --font-size-h4: 2rem;
    --font-size-h5: 2rem;
    --font-size-h6: 2rem;
    --font-size-pre-heading: 0.8rem;
    --font-size-mobile-jumbo: 2rem;
    --font-size-mobile-h1: 1.75rem;
    --font-size-mobile-h2: 1.5rem;
    --font-size-mobile-h3: 1.2rem;
    --font-size-mobile-h4: 1rem;
    --font-size-mobile-h5: 1rem;
    --font-size-mobile-h6: 1rem;
}

/* ---------------------------------------------------------
   Colour roles - light mode (secondary colour scheme)
   For sections that need a light background with dark text,
   e.g. blocks with a background image. Add the class to the
   block's root element and everything inside follows.
   Variables that point at other variables are resolved where
   they are declared, so every one of them is repeated here.
   --------------------------------------------------------- */
.theme-light {
    --color-background: var(--white);
    --color-container-1: var(--mist-1);
    --color-container-2: var(--mist-2);
    --color-container-3: var(--violet);
    --color-text-primary: var(--black);
    --color-text-secondary: var(--mist-4);
    --color-text-tertiary: var(--violet);
    --color-text-on-container-3: var(--white);
    --color-line: var(--mist-3);
    --color-accent: var(--violet);
    --color-text-on-accent: var(--white);
    --color-success: var(--green-light);
    --color-critical: var(--red-light);
    --color-warning: var(--yellow-light);
    --color-information: var(--blue-light);
    --color-accent-hover: var(--black);
    --color-text-on-accent-hover: var(--white);
    --color-link: var(--violet);
    --color-hover-background: rgb(0 0 0 / 0.05);
    --background-primary: var(--color-container-1);
    --background-secondary: var(--color-container-2);
    --button-primary-background: var(--color-accent);
    --button-primary-border: var(--color-accent);
    --button-primary-text: var(--color-text-on-accent);
    --button-primary-hover-background: var(--color-accent-hover);
    --button-primary-hover-border: var(--color-accent-hover);
    --button-primary-hover-text: var(--color-text-on-accent-hover);
    --button-white-border: var(--black);
    --button-black-background: var(--black);
    --button-black-border: var(--black);
    --button-transparent-border: var(--color-text-primary);
    --button-transparent-text: var(--color-text-primary);
    --roadmap-progress-background-color: var(--color-container-1);
    --button-link-primary-text: var(--color-link);
    --roadmap-progress-completed-color: var(--color-accent);
    --roadmap-progress-track-color: var(--color-line);
    --roadmap-complete-color: var(--color-text-primary);
    --roadmap-pending-color: var(--color-text-secondary);
    --roadmap-incomplete-color: var(--color-text-secondary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
}