/*
  @file This is our file to create the variables that will be used across the theme.

  To override these in your sub-theme, just create a new variables.css file and
  library, and add that to your theme.info.yml file.

  We are adding these to body instead of :root so we can more easily override
  them in the future. For example if we create a theme setting to add an inline
  style for --color-accent: red;, or if we used JS to add it to the body element.
*/
body {
  /* Widths and Spacing */
  --width-mega: 90rem; /* 1440px */
  --width-extra-large: 73.75rem; /* 1180px */
  --width-large: 60rem;
  --width-medium: 48rem;
  --width-small: 30rem;
  --width-container: var(--width-extra-large);
  --width-restricted-width-section: var(--width-medium);
  --spacing-smallest: calc(var(--spacing) * 0.25);
  --spacing-smaller: calc(var(--spacing) * 0.5);
  --spacing-small: calc(var(--spacing) * 0.75);
  --spacing: 1rem;
  --spacing-large: calc(var(--spacing) * 1.5);
  --spacing-larger: calc(var(--spacing) * 2);
  --spacing-largest: calc(var(--spacing) * 2.5);
  --spacing-mega: calc(var(--spacing) * 3);
  --spacing-padding-horizontal: var(--spacing);
  --line-height: 1.5;
  --vertical-rhythm-spacing: calc(var(--line-height) * 1rem);

  /* Colours */
  /*
    Colours Defined
    In this section, we define the colours available in our theme.
    We should not refer to these directly in our CSS however. Instead,
    we use the names at our "Colours Applied" section.
  */
  --color-accent: #652c95;
  --color-accent-2: #ffe146;
  --color-green: #048a04;
  --color-red: #e4251b;
  --color-orange: #ed7522;
  --color-yellow: #fd0;
  --color-blue: #297bbb;
  /*
    Grey Scale
    In this section, we define our greys; let's not have 50 shades
  */
  --color-white: #fff;
  --color-grey-lightest: #f9f9f9;
  --color-grey-lighter: #eaeaea;
  --color-grey-light: #cecfd0;
  --color-grey-medium: #b1b4b6;
  --color-grey-dark: #505a5f;
  --color-black: #0b0c0c;
  /*
    Colours Applied
    In this section, we "apply" our colours.
  */
  --color-info: var(--color-blue);
  --color-success: var(--color-green);
  --color-danger: var(--color-red);
  --color-warning: var(--color-orange);
  --color-minor: var(--color-yellow);
  --color-link: var(--color-accent);
  --color-focus: var(--color-yellow);
  --color-unpublished-bg: pink;

  /* Fonts */
  /*
    We choose basic fonts that most people have in browser cache from visiting other websites.
    This will help with page speed, rather than calling fonts from Google Fonts or somewhere.
  */
  --font-primary: roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-secondary: georgia, "Times New Roman", times, serif;
  --font-heading-1: var(--font-secondary);
  --font-heading-2: var(--font-secondary);
  --font-heading-3: var(--font-secondary);
  --font-heading-4: var(--font-secondary);
  --font-heading-5: var(--font-secondary);
  --font-heading-6: var(--font-secondary);
  /*
    Font sizes based on vertical rhythm of:
    - Font size: 16px;
    - Scale factor: 1.303
    - Details: https://www.gridlover.net/try
  */
  --font-size: 1rem;
  --font-size-smallest: calc(var(--font-size) * 0.3);
  --font-size-smaller: calc(var(--font-size) * 0.5);
  --font-size-small: calc(var(--font-size) * 0.75);
  --font-size-medium: calc(var(--font-size) * 1);
  --font-size-large: calc(var(--font-size) * 1.3125);
  --font-size-larger: calc(var(--font-size) * 1.6875);
  --font-size-largest: calc(var(--font-size) * 2.875);
  --font-size-h1: clamp(var(--font-size-larger), 10vw, var(--font-size-largest));
  --font-size-h2: clamp(var(--font-size-large), 8vw, var(--font-size-larger));
  --font-size-h3: clamp(var(--font-size-medium), 6vw, var(--font-size-large));
  --font-size-h4: var(--font-size-medium);
  --font-size-h5: var(--font-size-medium);
  --font-size-h6: var(--font-size-medium);

  /* Heading colours */
  --color-text: var(--color-black);
  --heading-1-color: var(--color-text);
  --heading-2-color: var(--color-text);
  --heading-3-color: var(--color-text);
  --heading-4-color: var(--color-text);
  --heading-5-color: var(--color-text);
  --heading-6-color: var(--color-text);

  /* Heading line-height */
  --heading-1-line-height: var(--line-height);
  --heading-2-line-height: var(--line-height);
  --heading-3-line-height: var(--line-height);
  --heading-4-line-height: var(--line-height);
  --heading-5-line-height: var(--line-height);
  --heading-6-line-height: var(--line-height);

  /* Heading font-weight */
  --heading-font-weight: bold;
  --heading-1-font-weight: var(--heading-font-weight);
  --heading-2-font-weight: var(--heading-font-weight);
  --heading-3-font-weight: var(--heading-font-weight);
  --heading-4-font-weight: var(--heading-font-weight);
  --heading-5-font-weight: var(--heading-font-weight);
  --heading-6-font-weight: var(--heading-font-weight);

  /* Border Properties */
  --border-width: 1px;
  --border-width-large: 5px;
  --border-color: var(--color-grey-light);
  --border-color-dark: var(--color-grey-dark);
  --border-color-light: var(--color-grey-lightest);
  --border-color-accent: var(--color-accent);
  --border-color-alert: var(--color-black);
  --border-style: solid;
  --border-radius: var(--spacing-smallest);

  /* Borders */
  /* Borders: Standard */
  --border: var(--border-width) var(--border-style) var(--border-color);
  --border-light: var(--border-width) var(--border-style) var(--border-color-light);
  --border-dark: var(--border-width) var(--border-style) var(--border-color-dark);
  --border-accent: var(--border-width) var(--border-style) var(--border-color-accent);
  --border-transparent: var(--border-width) var(--border-style) transparent;

  /* Borders: Large */
  --border-large: var(--border-width-large) var(--border-style) var(--border-color);
  --border-large-dark: var(--border-width-large) var(--border-style) var(--border-color-dark);
  --border-large-light: var(--border-width-large) var(--border-style) var(--border-color-light);
  --border-large-accent: var(--border-width-large) var(--border-style) var(--color-accent);
  --border-large-transparent: var(--border-width-large) var(--border-style) transparent;

  /* Animation */
  --transition-time: 0.3s;

  /* Dialog */
  --dialog-backdrop-color: rgb(0, 0, 0, 0.8);
}

/*
  Applying Variables

  By taking this approach of setting variables above, and then applying them here
  to specific items, we can easily override these in sub-themes to change items
  one-by-one without the CSS cascade affecting us (unless we want it to - in that case,
  override the defined variables above instead).
*/
body {
  /* Grid */
  --grid-column-spacing: var(--spacing);

  /* Breadcrumbs */
  --breadcrumbs-background-color: var(--color-white);
  --breadcrumbs-border: var(--border);
  --breadcrumbs-divider: "»";
  --breadcrumbs-font-size: var(--font-size-medium);
  --breadcrumbs-padding-vertical: var(--spacing-small);
  --breadcrumbs-padding-horizontal: 0;
  --breadcrumbs-link-color: var(--color-link);
  --breadcrumbs-spacing-bottom: var(--vertical-rhythm-spacing);

  /* Header Items */
  --section-spacing-vertical-header: var(--spacing);
  --color-section-header-bg: var(--color-accent);
  --header-link-color: var(--color-white);
  --header-services-button-border: var(--border);
  --header-services-button-border-color: var(--color-white);
  --header-services-button-color: var(--color-white);
  --header-services-button-bg-color: transparent;
  --header-services-button-bg-color-hover: var(--color-accent);
  --header-services-button-color-hover: var(--color-white);
  --header-logo-width: 10rem;
  --color-slogan: var(--color-white);
  --header-search-button-color: var(--color-white);
  --header-search-button-bg-color: var(--color-accent);
  --header-search-button-color-hover: var(--color-accent);
  --header-search-button-bg-color-hover: var(--color-white);
  --header-search-input-border: var(--border-transparent);

  /* Secondary Menu */
  --secondary-menu-bg-color-first: var(--color-accent);
  --secondary-menu-bg-color-second: var(--color-white);
  --secondary-menu-link-color: var(--color-black);
  --secondary-menu-link-color-focus: var(--color-black);
  --secondary-menu-column-count: 3;

  /* Footer Items */
  --color-section-pre-footer-bg: var(--color-grey-dark);
  --color-section-footer-bg: var(--color-white);
  --color-section-post-footer-bg: var(--color-white);
  --section-spacing-vertical-pre-footer: var(--spacing-largest);
  --section-spacing-vertical-footer: var(--spacing);
  --section-spacing-vertical-post-footer: var(--spacing);
  --color-pre-footer-heading: var(--color-white);
  --color-pre-footer-link: var(--color-white);
  --color-pre-footer-text: var(--color-white);
  --color-footer-heading: var(--color-text);
  --color-footer-link: var(--color-link);
  --color-footer-text: var(--color-text);
  --color-post-footer-heading: var(--color-text);
  --color-post-footer-link: var(--color-link);
  --color-post-footer-text: var(--color-text);

  /* Housekeeping Items */
  --color-section-housekeeping-bg: var(--color-accent);
  --color-housekeeping-heading: var(--color-white);
  --color-housekeeping-link: var(--color-white);
  --color-housekeeping-text: var(--color-white);
  --section-spacing-vertical-housekeeping: var(--spacing);

  /* Page Title */
  --page-title-border: var(--border);
  --page-title-width: var(--width-medium);
  --page-title-subtitle-font-size: var(--font-size-h2);
  --page-title-lede-font-size: var(--font-size-h3);

  /* Form Item Description Items */
  --form-item-description-bg-color: var(--color-grey-lightest);
  --form-item-description-border: var(--border);

  /* Input Elements */
  --input-padding-vertical: var(--spacing);
  --input-padding-horizontal: var(--spacing);
  --input-text-color: var(--color-white);
  --input-text-color-hover: var(--color-accent);
  --input-icon-color: var(--input-text-color);
  --input-icon-color-hover: var(--color-accent);
  --input-border-color: var(--color-grey-dark);
  --input-border-color-hover: var(--color-grey-dark);
  --input-bg-color: var(--color-white);
  --input-bg-color-hover: var(--color-grey-light);
  --input-border-radius: 0;
  --text-input-font-family: var(--font-primary);

  /* Checkbox Items */
  --checkbox-select-focus-color: var(--color-focus);
  --checkbox-select-outline-color: var(--color-black);

  /* Radio Items */
  --radio-select-focus-color: var(--color-focus);
  --radio-select-outline-color: var(--color-black);

  /* Button Elements (and button-styled links) */
  --button-padding-vertical: var(--spacing);
  --button-padding-horizontal: var(--spacing);
  --button-text-color: var(--color-white);
  --button-text-color-hover: var(--color-accent);
  --button-icon-color: var(--button-text-color);
  --button-icon-color-hover: var(--color-accent);
  --button-border-color: var(--color-accent);
  --button-bg-color: var(--color-accent);
  --button-bg-color-hover: var(--color-white);
  --button-font-family: var(--font-primary);
  --button-border-radius: 0;

  /* File Upload Items */
  --file-upload-border: var(--border);
  --file-upload-border-left-size: var(--border-width-large); /* Deprecated */
  --file-upload-border-inline-start-size: var(--border-width-large);
  --file-upload-border-color: var(--color-accent);
  --file-upload-bg-hover-color: var(--color-accent);
  --file-upload-text-hover-color: var(--color-white);

  /* Fieldset Elements */
  --fieldset-border-color: var(--color-grey-dark);

  /* Option Elements */
  --option-bg-color: var(--color-accent);
  --option-color: var(--color-white);
  --option-bg-hover-color: var(--color-white);
  --option-hover-color: var(--color-accent);

  /* Sidebar Items */
  --sidebar-exposed-form-bg-color: var(--color-grey-light);
  --sidebar-exposed-form-padding-vertical: var(--spacing-larger);
  --sidebar-exposed-form-padding-horizontal: var(--spacing-larger);
  --sidebar-exposed-form-item-spacing: var(--spacing);

  /* Guide Navigation */
  --section-spacing-vertical-guide-nav: calc(var(--spacing-large) + 1rem); /* 1rem to account for padding on left of bullets */
  --section-spacing-horizontal-guide-nav: var(--spacing-large);
  --guide-nav-column-count: 3;

  /* IA Block */
  --ia-block-bg-color: var(--color-white);
  --ia-block-bg-color-promoted: var(--color-white);

  /* Link component */
  --link-icon-margin: var(--spacing-smaller);

  /* Link and summary component */
  --link-and-summary-title-icon-margin: var(--spacing-smaller);

  /* Featured Subsite */
  --featured-subsite-bg-color: var(--color-grey-light);

  /* Box Links */
  --box-link-border: var(--border-dark);
  --box-link-content-spacing: var(--spacing-small);

  /* Fact Box */
  --fact-box-bg-light: var(--color-grey-light);
  --fact-box-bg-dark: var(--color-grey-dark);
  --fact-box-bg-accent: var(--color-accent);
  --fact-box-padding-vertical: var(--spacing-largest);
  --fact-box-padding-horizontal: var(--spacing-large);
  --fact-box-title: var(--font-size-large);
  --fact-box-fact: var(--font-size-largest);
  --fact-box-border: var(--border-large);
  --fact-box-border-color: var(--color-grey-medium);
  --fact-box-red: red;
  --fact-box-blue: blue;
  --fact-box-text-color-accent: var(--color-white);

  /* Image with Caption */
  --image-with-caption-border: var(--border);
  --image-with-caption-border-color: var(--color-grey-light);
  --image-with-caption-padding: var(--spacing);
  --image-with-caption-bg-color: var(--color-grey-light);

  /* Quote */
  --quote-padding: var(--spacing-larger);
  --quote-padding-left: var(--spacing-larger); /* Deprecated */
  --quote-padding-inline-start: var(--spacing-larger);
  --quote-border: var(--border-large);
  --quote-border-color: var(--color-accent);
  --quote-bg-color: var(--color-grey-lighter);
  --quote-author-color: var(--color-accent);

  /* Featured Teasers */
  --featured-teaser-border: var(--border);
  --featured-teaser-content-padding: var(--spacing);

  /* Documents */
  --table-border: var(--border);
  --table-padding: var(--spacing);
  --table-bg-color: var(--color-grey-light);
  --table-header-border-color: var(--color-grey-medium);

  /* Tabs */
  --tabs-border: var(--border);
  --tabs-border-color: var(--color-grey-dark);
  --tabs-text-color: var(--color-grey-dark);
  --tabs-button-bg-color: var(--color-grey-light);
  --tabs-button-active-color: var(--color-white);
  --tabs-button-font-size: var(--font-size);
  --tabs-button-font-family: var(--font-primary);

  /* Links styled like buttons */
  --button-link-padding: var(--spacing);
  --button-link-bg-color: var(--color-accent);
  --button-link-color: var(--color-white);
  --button-link-bg-color-hover: var(--color-accent);
  --button-link-color-hover: var(--color-white);

  /* Step-by-Step */
  --step-by-step-relationship-border-color: var(--color-accent);
  --step-by-step-part-of-color: var(--color-accent);
  --step-by-step-active-item-color: var(--color-accent);
  --step-by-step-active-bullet-bg-color: var(--color-accent);
  --step-by-step-active-bullet-border-color: var(--color-accent);
  --step-by-step-line-joining-items-border: var(--border);
  --step-by-step-line-joining-items-color: var(--color-accent);
  --step-by-step-nav-block-width: var(--width-medium);

  /* Call-out Box */
  --call-out-box-padding: var(--spacing-large);
  --call-out-box-link-padding: var(--spacing-smaller);
  --call-out-box-bg-color: var(--color-accent);
  --call-out-box-text-color: var(--color-white);
  --call-out-box-title-color: var(--call-out-box-text-color);

  /* Service Statuses */
  --service-statuses-padding: var(--spacing);
  --service-statuses-container-bg-color: var(--color-accent);
  --service-statuses-container-text-color: var(--color-white);
  --service-statuses-list-bg-color: var(--color-white);
  --service-statuses-list-spacing: var(--spacing-large);
  --service-statuses-list-border: var(--border);
  --service-statuses-list-border-color: var(--color-accent);

  /* Banner */
  --banner-content-width: var(--width-medium);
  --banner-content-margin: calc(var(--spacing-largest) * 2);
  --banner-content-padding: var(--spacing-largest);
  --banner-content-bg-color: var(--color-accent);
  --banner-content-text-color: var(--color-white);
  --banner-title-size: var(--font-size-larger);
  --color-banner-title-link: var(--color-white);
  --color-banner-title-link-hover: var(--color-white);

  /* Teaser View Mode */
  --teaser-image-with: 33%;
  --teaser-featured-content-padding: var(--spacing-larger);
  --teaser-featured-height: 100%;
  --teaser-featured-border: var(--border);
  --teaser-featured-border-color: var(--border-color-dark);

  /* Card View Mode */
  --card-height: var(--teaser-featured-height);
  --card-border: var(--teaser-featured-border);
  --card-border-color: var(--teaser-featured-border-color);
  --card-content-padding: var(--teaser-featured-content-padding);

  /* News */
  --newsroom-featured-bottom-space: var(--spacing-largest);
  --news-category-spacing: var(--spacing);
  --newsroom-featured-space-after-items: var(--spacing);

  /* Search Results */
  --sitewide-search-header-container-padding-horizontal: var(--spacing);
  --sitewide-search-header-container-padding-vertical: var(--spacing);
  --search-results-item-spacing: var(--spacing-largest);
  --search-results-list-item-border: var(--border);
  --search-results-list-item-marker-color: transparent;

  /* WYSIWYG Styles */
  --btn-start-bg-color: var(--color-success);
  --btn-start-bg-color-hover: var(--color-white);
  --btn-start-color: var(--color-white);
  --btn-start-color-hover: var(--color-success);
  --btn-start-padding-horizontal: var(--spacing);
  --btn-start-padding-vertical: var(--spacing-smaller);
  --btn-start-border: var(--border);
  --btn-start-border-color-hover: var(--btn-start-bg-color);
  --btn-start-icon: "\203A";
  --btn-start-icon-size: var(--font-size-largest);
  --btn-start-icon-top: -5px;
  --external-link-icon-color: var(--color-accent);
  --wysiwyg-align-spacing: var(--spacing);

  /* Alert Banner */
  --alert-banner-bg-color: var(--color-success);
  --alert-banner-bg-color-minor: var(--color-minor);
  --alert-banner-bg-color-major: var(--color-danger);
  --alert-banner-bg-color-notable-person: var(--color-black);
  --alert-banner-color: var(--color-white);
  --alert-banner-title-color-notable-person: inherit;
  --alert-banner-title-color-announcement: inherit;
  --alert-banner-title-color-minor: inherit;
  --alert-banner-title-color-major: inherit;
  --alert-banner-focus-color: var(--color-black);
  --alert-banner-minor-color: var(--color-black);
  --alert-banner-minor-border-color: var(--color-black);
  --alert-banner-close-button-bg-color: var(--color-black);
  --alert-banner-close-button-color: var(--color-white);
  --alert-banner-close-button-border-color: var(--color-white);
  --alert-banner-close-padding-vertical: var(--spacing-smaller);
  --alert-banner-close-padding-horizontal: var(--spacing-small);
  --alert-banner-color-minor: var(--color-black);
  --alert-banner-close-border: var(--border);
  --alert-banner-close-border-color: var(--color-white);
  --alert-banner-inner-margin-vertical: 0;
  --alert-banner-inner-margin-horizontal: 0;
  --alert-banner-inner-padding-vertical: var(--spacing);
  --alert-banner-inner-padding-horizontal: 0;

  /* Contact */
  --contact-border: var(--border);
  --contact-accent-color: var(--color-accent);
  --contact-spacing: var(--spacing);
  --contact-accent-color-contrast: var(--color-white);

  /* Leaflet Mapping */
  --leaflet-map-outline-stroke-colour: #38f;

  /* Blogs */
  --blog-author-image-width: calc(var(--teaser-image-with) / 2);
  --blog-author-content-margin: var(--spacing-largest);

  /* Page Sections */
  --color-page-section-background-color: transparent;
  --color-page-section-text-color: var(--color-black);
  --color-page-section-background-color-1: var(--color-accent);
  --color-page-section-background-color-1-text-color: var(--color-white);
  --color-page-section-background-color-1-link-color: var(--color-white);
  --color-page-section-background-color-2: var(--color-accent-2);
  --color-page-section-background-color-2-text-color: var(--color-black);
  --color-page-section-background-color-2-link-color: var(--color-black);
  --color-page-section-background-color-3: var(--color-grey-lightest);
  --color-page-section-background-color-3-text-color: var(--color-black);
  --color-page-section-background-color-3-link-color: var(--color-black);
  --color-page-section-background-color-4: var(--color-accent);
  --color-page-section-background-color-4-text-color: var(--color-white);
  --color-page-section-background-color-4-link-color: var(--color-white);
  --color-page-section-background-color-5: var(--color-accent);
  --color-page-section-background-color-5-text-color: var(--color-white);
  --color-page-section-background-color-5-link-color: var(--color-white);
  --color-page-section-background-color-6: var(--color-accent);
  --color-page-section-background-color-6-text-color: var(--color-white);
  --color-page-section-background-color-6-link-color: var(--color-white);
  /* Page Sections - Newsroom Teasers */
  --color-page-section-background-color-1-newsroom-teaser-background-color: var(--color-white);
  --color-page-section-background-color-1-newsroom-teaser-text-color: var(--color-black);
  --color-page-section-background-color-1-newsroom-teaser-link-color: var(--color-black);
  --color-page-section-background-color-2-newsroom-teaser-background-color: var(--color-white);
  --color-page-section-background-color-2-newsroom-teaser-text-color: var(--color-black);
  --color-page-section-background-color-2-newsroom-teaser-link-color: var(--color-black);
  --color-page-section-background-color-3-newsroom-teaser-background-color: var(--color-black);
  --color-page-section-background-color-3-newsroom-teaser-text-color: var(--color-white);
  --color-page-section-background-color-3-newsroom-teaser-link-color: var(--color-white);
  --color-page-section-background-color-4-newsroom-teaser-background-color: var(--color-white);
  --color-page-section-background-color-4-newsroom-teaser-text-color: var(--color-black);
  --color-page-section-background-color-4-newsroom-teaser-link-color: var(--color-black);
  --color-page-section-background-color-5-newsroom-teaser-background-color: var(--color-white);
  --color-page-section-background-color-5-newsroom-teaser-text-color: var(--color-black);
  --color-page-section-background-color-5-newsroom-teaser-link-color: var(--color-black);
  --color-page-section-background-color-6-newsroom-teaser-background-color: var(--color-white);
  --color-page-section-background-color-6-newsroom-teaser-text-color: var(--color-black);
  --color-page-section-background-color-6-newsroom-teaser-link-color: var(--color-black);
  /* Page Sections - Box Links */
  --color-page-section-background-color-1-box-link-border-color: var(--color-white);
  --color-page-section-background-color-1-box-link-background-color: var(--color-white);
  --color-page-section-background-color-1-box-link-text-color: var(--color-black);
  --color-page-section-background-color-1-box-link-link-color: var(--color-black);
  --color-page-section-background-color-2-box-link-border-color: var(--color-white);
  --color-page-section-background-color-2-box-link-background-color: var(--color-white);
  --color-page-section-background-color-2-box-link-text-color: var(--color-black);
  --color-page-section-background-color-2-box-link-link-color: var(--color-black);
  --color-page-section-background-color-3-box-link-border-color: var(--color-black);
  --color-page-section-background-color-3-box-link-background-color: var(--color-black);
  --color-page-section-background-color-3-box-link-text-color: var(--color-white);
  --color-page-section-background-color-3-box-link-link-color: var(--color-white);
  --color-page-section-background-color-4-box-link-border-color: var(--color-white);
  --color-page-section-background-color-4-box-link-background-color: var(--color-white);
  --color-page-section-background-color-4-box-link-text-color: var(--color-black);
  --color-page-section-background-color-4-box-link-link-color: var(--color-black);
  --color-page-section-background-color-5-box-link-border-color: var(--color-white);
  --color-page-section-background-color-5-box-link-background-color: var(--color-white);
  --color-page-section-background-color-5-box-link-text-color: var(--color-black);
  --color-page-section-background-color-5-box-link-link-color: var(--color-black);
  --color-page-section-background-color-6-box-link-border-color: var(--color-white);
  --color-page-section-background-color-6-box-link-background-color: var(--color-white);
  --color-page-section-background-color-6-box-link-text-color: var(--color-black);
  --color-page-section-background-color-6-box-link-link-color: var(--color-black);
  /* Page Sections - Featured Subsites */
  --color-page-section-background-color-1-featured-subsite-background-color: var(--color-grey-lightest);
  --color-page-section-background-color-1-featured-subsite-text-color: var(--color-black);
  --color-page-section-background-color-1-featured-subsite-link-color: var(--color-black);
  --color-page-section-background-color-2-featured-subsite-background-color: var(--color-grey-lightest);
  --color-page-section-background-color-2-featured-subsite-text-color: var(--color-black);
  --color-page-section-background-color-2-featured-subsite-link-color: var(--color-black);
  --color-page-section-background-color-3-featured-subsite-background-color: var(--color-black);
  --color-page-section-background-color-3-featured-subsite-text-color: var(--color-grey-lightest);
  --color-page-section-background-color-3-featured-subsite-link-color: var(--color-grey-lightest);
  --color-page-section-background-color-4-featured-subsite-background-color: var(--color-grey-lightest);
  --color-page-section-background-color-4-featured-subsite-text-color: var(--color-black);
  --color-page-section-background-color-4-featured-subsite-link-color: var(--color-black);
  --color-page-section-background-color-5-featured-subsite-background-color: var(--color-grey-lightest);
  --color-page-section-background-color-5-featured-subsite-text-color: var(--color-black);
  --color-page-section-background-color-5-featured-subsite-link-color: var(--color-black);
  --color-page-section-background-color-6-featured-subsite-background-color: var(--color-grey-lightest);
  --color-page-section-background-color-6-featured-subsite-text-color: var(--color-black);
  --color-page-section-background-color-6-featured-subsite-link-color: var(--color-black);

  /* Add to Calendar */
  --add-to-calendar-dialog-max-width: 80%;
  --add-to-calendar-dialog-max-height: 80%;
  --add-to-calendar-dialog-width: 500px;
  --add-to-calendar-dialog-height: 500px;
  --add-to-calendar-dialog-backdrop-color: var(--color-black);
  --add-to-calendar-dialog-backdrop-opacity: 0.75;
  --add-to-calendar--icon-color: var(--color-white);
  --add-to-calendar--icon-color-hover: var(--color-accent);

  /* Accordion */
  --accordion-icon-closed: "+";
  --accordion-icon-opened: "-";

  /* Image */
  --image-alt-font-style: italic;
  --image-alt-font-size-large: var(--font-size-large);
  --image-alt-color: var(--color-black);
  --image-alt-spacing: var(--spacing);
  --image-alt-border: var(--border);
  --image-alt-bg-color: var(--color-grey-lightest);
}
