:root {

  /*
  Colours
  */

  --color-mine-shaft: #222222;
  --color-mine-shaft-light: #CFCFCF;
  --color-white: #FFF;
  --color-page-white: #FAFAFA;
  --color-torea-blue: #101e8e;
  --color-torea-blue-light: #EEEFF5;
  --color-new-lochmara: #1365DF;
  --color-skyblue: #e0f5fb;
  --color-weborange: #ffaa00;
  --color-weborange-light: #FFEECC;
  --color-plum: #A90082;
  --color-dark-amour: #f6e5f3;
  --color-light-plum: #DD99CD;
  --color-boston-blue: #3b7fc4;
  --color-alto: #ddd;
  --color-alto-lighter: #f8f8f8;
  --color-hot-cinnamon: #e4621c;
  --color-well-read: #b33630;
  --color-brand-primary: #2771a2;
  --color-brand-danger: #c70000;
  /*--color-deluge: #6972B8;*/

  --color-primary: var(--color-torea-blue);
  --color-primary-10: var(--color-torea-blue-light);
  --color-secondary: var(--color-new-lochmara);
  --color-base: var(--color-skyblue);
  --color-tertiary: var(--color-weborange);
  --color-tertiary-light: var(--color-weborange-light);

  --color-text: var(--color-mine-shaft);
  --colour-focus: var(--color-new-lochmara);
  --color-blockquote-border: var(--color-primary);
  --color-link: var(--color-text);
  --color-list-marker: var(--color-plum);
  --color-form-input-outline: #9FB1BD;
  --color-form-input-background: #FFF;
  --color-form-option-active: var(--color-primary);
  --color-button-bg: var(--color-primary);
  --color-button-bg-hover: var(--color-tertiary);
  --color-button-text: var(--color-white);

  --font-system-ui: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-brand: "MuseoSans",Helvetica,Arial,sans-serif;
  --font-base: var(--font-brand);
  --font-bold: 700;

  --border-radius: 22px;
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-spacy: 1.4;
  --list-space: 0.25rem;

  /*
  Layouts
  */
  --gutter: var(--space-xs-s);
  --box-space: var(--space-l);
  --autogrid-min-size: 16rem;
  --autogrid-gutter: var(--gutter);
  --max-width-container: 1200px;
  --max-width-content: 37.5rem;
  --container-x-wide: max(16rem, min(100vw, 95rem));
  --container-wide: max(16rem, min(98vw, 85rem)); /* maxwidth 1200px + 2 * padding */
  --container-narrow: max(16rem, min(93vw, 45rem));
  --container-gutter: clamp(1.25rem, 0.096rem + 5.769vw, 5rem);
  --flow-space: var(--space-l);
  --switcher-threshold: 50rem;
  --sidebar-width: 16rem;
  --sidebar-gutter: 5.5rem;
  --cluster-horizontal-alignment: flex-start;
  --cluster-vertical-alignment: center;
  --slat-gap: var(--space-2xl);

  /*
  Space
  @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
  */
  /* --space-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem); */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: max(0.5rem, min(calc(1.40rem + 1.41vw), 1rem)); /* 8px - 16px */
  --space-s: 0.75rem; /* 12px */
  --space: max(1rem, min(calc(1.40rem + 1.41vw), 1.5rem)); /* 16px - 24px */
  --space-m: max(1.50rem, min(calc(1.32rem + 0.91vw), 2.00rem)); /* 24px - 32px */
  --space-l: max(2rem, min(calc(1.40rem + 1.41vw), 2.5rem)); /* 32px - 48px */
  --space-xl: 2.5rem; /* 40px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 3.75rem; /* 60px */
  --space-4xl: 5rem; /* 80px */
  --space-5xl: 6rem;
  /*--space-3xs-2xs: clamp(0.125rem, calc(0.20rem + 0.54vw), 0.25rem);
  --space-2xs-xs: clamp(0.25rem, calc(0.43rem + 0.65vw), 0.5rem);
  --space-xs-s: clamp(0.5rem, calc(0.74rem + 0.65vw), 0.75rem);
  --space-s-m: clamp(1.13rem, calc(0.86rem + 1.30vw), 1.88rem);
  --space-m-l: clamp(1.5rem, calc(1.40rem + 1.41vw), 2rem);
  --space-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem);
  --space-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5.00rem);
  --space-2xl-3xl: clamp(4.50rem, calc(3.46rem + 5.22vw), 7.50rem);
  --space-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem);*/

  --space-l-m: max(2rem, min(calc(1.40rem + 1.41vw), 1.5rem)); /* 24px - 60px */
  --space-m-3xl: max(2rem, min(calc(1.40rem + 1.41vw), 3rem)); /* 24px - 60px */
  --space-m-4xl: max(2rem, min(calc(1.40rem + 1.41vw), 3rem)); /* 24px - 80px */
  --space-2xl-5xl: max(2rem, min(calc(1.40rem + 1.41vw), 36rem));
  /*
  Type
  @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
  */
  --type--2: max(0.75rem, min(calc(0.75rem + 0.33vw), 0.88rem));
  --type--1: max(0.88rem, min(calc(0.75rem + 0.33vw), 1.00rem));
  --type-0: max(1.00rem, min(calc(0.88rem + 0.33vw), 1.13rem)); /* 16 - 18 body h4 - h6 */
  --type-1: max(1.13rem, min(calc(1.00rem + 0.33vw), 1.25rem)); /* 18 - 20 h3 */
  --type-2: clamp(1.25rem, 0.938rem + 0.833vw, 1.563rem); /* 20 - 25 h2 */
  --type-3: max(1.56rem, min(calc(0.88rem + 1.83vw), 1.75rem)); /* 25px - 35px h1 */
  --type-3-alt: max(1.56rem, min(calc(0.88rem + 1.83vw), 2.25rem)); /* 25px - 35px h1 basic page*/
  --type-4: max(2.25rem, min(calc(1.94rem + 0.83vw), 2.56rem));


  /*
   * Components
   */

  --messages-status-bg: #f3faef;
  --messages-status-text: #325e1c;
  --messages-status-border: #c9e1bd;
  --messages-status-bar: #77b259;

  --messages-warning-bg: #fdf8ed;
  --messages-warning-text: #734c00;
  --messages-warning-border: #f4daa6;
  --messages-warning-bar: #e09600;

  --messages-error-bg: #fcf4f2;
  --messages-error-text: #a51b00;
  --messages-error-border: #f9c9bf;
  --messages-error-bar: #e62600;

  --tabs-highlight: #0F62FE;

}