:root {
  
  --os-version: '0.3.3';

  --os-base: 62.5%;

  /* ===== Colours ===== */
  --os-color-primary: #453c90; /* Berry */
  --os-color-secondary: #d40058; /* Foxglove */

  --os-color-link: #0071bc;
  --os-color-link-visited: #4c2c92;

  --os-color-border: #757575;

  --os-color-error: #c63d54;
  --os-color-success: #118011;
  --os-color-warning: #ffb000;

  --os-color-custom-1: #77555d; /* Heather */
  --os-color-custom-2: #74955b; /* Moss */
  --os-color-custom-3: #9f8f7a; /* Sand */
  --os-color-custom-4: #4e526a; /* Slate */
  --os-color-custom-5: #333333; /* Charcol */  
  --os-color-custom-6: #f5f5f5; /* Clouds */  
  --os-color-custom-7: #dddddd; /* Mist */  
  --os-color-custom-8: #999999; /* Rock */  
  --os-color-custom-9: #666666; /* Stone */  

  --os-color-light: #ffffff; /* Main background. Substitute for white */
  --os-color-dark: #000000; /* Main foreground. Substitute for black */

  /* Base hue and saturation values for shades. Default is black, to give grey shades. */
  --os-color-shade-h: 0;
  --os-color-shade-s: 0%;

  --os-color-shade-10: hsl(var(--os-color-shade-h), var(--os-color-shade-s), 10%);
  --os-color-shade-20: hsl(var(--os-color-shade-h), var(--os-color-shade-s), 20%);
  --os-color-shade-30: hsl(var(--os-color-shade-h), var(--os-color-shade-s), 30%);
  --os-color-shade-40: hsl(var(--os-color-shade-h), var(--os-color-shade-s), 40%);
  --os-color-shade-50: hsl(var(--os-color-shade-h), var(--os-color-shade-s), 50%);
  --os-color-shade-60: hsl(var(--os-color-shade-h), var(--os-color-shade-s), 60%);
  --os-color-shade-70: hsl(var(--os-color-shade-h), var(--os-color-shade-s), 70%);
  --os-color-shade-80: hsl(var(--os-color-shade-h), var(--os-color-shade-s), 80%);
  --os-color-shade-90: hsl(var(--os-color-shade-h), var(--os-color-shade-s), 90%);

  /* ===== Fonts =====  */
  --os-font-primary-sans: 'OS Gill Light', Arial, Helvetica, sans-serif; /* Default */
  --os-font-secondary-sans: 'OS Gill Regular', Arial, Helvetica, sans-serif;
  --os-font-primary-serif: Georgia, 'Times New Roman', Times, serif;
  --os-font-secondary-serif: Georgia, 'Times New Roman', Times, serif;
  --os-font-primary-mono: 'Courier New', Courier, monospace;
  --os-font-secondary-mono: 'Courier New', Courier, monospace;

  --os-font-size-s: 0.875rem; /* 14px */
  --os-font-size-m: 1rem; /* 16px Default */
  --os-font-size-l: 1.125rem; /* 18px */
  --os-font-size-xl: 1.25rem; /* 20px */
  --os-font-size-2xl: 1.5rem; /* 24px */
  --os-font-size-3xl: 1.75rem; /* 28px */
  --os-font-size-4xl: 2rem; /* 32px */
  --os-font-size-5xl: 2.5rem; /* 40px */
  --os-font-size-6xl: 3rem; /* 48px */
  --os-font-size-7xl: 3.5rem; /* 56px */
  --os-font-size-8xl: 4rem; /* 64px */

  --os-font-lineheight-s: 1; /* 16px */
  --os-font-lineheight-m: 1.25; /* 20px */
  --os-font-lineheight-l: 1.5; /* 24px Default */
  --os-font-lineheight-xl: 1.75; /* 28px */
  --os-font-lineheight-2xl: 2; /* 32px */

  --os-font-weight-s: 200;
  --os-font-weight-m: 400; /* Default */
  --os-font-weight-l: 600;


  /* ===== Spacing =====  */
  --os-padding-s: 0.5rem; /* 8px */
  --os-padding-m: 1rem; /* 16px */
  --os-padding-l: 1.5rem; /* 24px */

  --os-margin-s: 0.5rem; /* 8px */
  --os-margin-m: 1rem; /* 16px Default */
  --os-margin-l: 1.5rem; /* 24px */


  /* ===== Borders =====  */
  --os-border-width-2xs: 0.0625rem; /* 1px Default */
  --os-border-width-xs: 0.125rem; /* 2px */
  --os-border-width-s: 0.25rem; /* 4px */
  --os-border-width-m: 0.5rem; /* 8px */
  --os-border-width-l: 1rem; /* 16px */

  --os-border-style: solid;

  --os-border-radius-s: 0.1875rem; /* 3px Default */
  --os-border-radius-m: 0.4375rem; /* 7px */
  --os-border-radius-l: 0.9375rem; /* 15px */


  /* ===== Opacity =====  */
  --os-opacity-s: 0.8; /* Default */
  --os-opacity-m: 0.6;
  --os-opacity-l: 0.4;


  /* ===== Animation =====  */
  --os-transition-length-s: 0.2;
  --os-transition-length-m: 0.5; /* Default (seconds) */
  --os-transition-length-l: 0.8;


  /* ===== Misc =====  */
  --os-content-width: 1220px;
}