// stylelint-disable no-invalid-position-at-import-rule

// The main stylesheet for this theme.

// Colors and Sass

@import 'init';

// Convert colour map to css4 variables.
// Use like this: var(--color-brand)
:root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};
  }
}

// Site specific variables.

@import 'extra';

// Ensure fonts get loaded first to minimize front-end performance impact.

@import 'fonts';

// Reset browsers to some sane defaults.

@import 'reset/reset';

// Layouts

@import 'layouts/layouts';

// Components

// Design components are reusable designs that can be applied using just the CSS
// class names specified in the component.

@import 'components/box/box';
@import 'components/button/button';
@import 'components/clearfix/clearfix';
@import 'components/cookieconsent/cookieconsent';
@import 'components/divider/divider';
@import 'components/header/header';
@import 'components/hidden/hidden';
@import 'components/highlight-mark/highlight-mark';
@import 'components/inline-links/inline-links';
@import 'components/inline-sibling/inline-sibling';
@import 'components/inverted-box/inverted-box';
@import 'components/language-selector/language-selector';
@import 'components/list-straight-left/list-straight-left';
@import 'components/messages/messages';
@import 'components/monospace/monospace';
@import 'components/responsive-video/responsive-video';
@import 'components/visually-hidden/visually-hidden';
@import 'components/watermark/watermark';
@import 'components/wireframe/wireframe';

// Navigation

@import 'navigation/more-link/more-link';
@import 'navigation/navbar/navbar';
@import 'navigation/pager/pager';

// Zen

@import 'zen';

// Custom

@import 'custom';