@layer base {
  :root {
    /* Neutral colors */
    --color-neutral-000: #ffffff;
    --color-neutral-100: #f6f8fa;
    --color-neutral-200: #eef1f6;
    --color-neutral-300: #e6eaf0;
    --color-neutral-400: #e2e7ef;
    --color-neutral-500: #c6ced9;
    --color-neutral-600: #a7b1be;
    --color-neutral-700: #8992a4;
    --color-neutral-800: #687288;
    --color-neutral-900: #575d71;
    --color-neutral-1000: #3f4555;
    --color-neutral-1100: #2c3344;
    --color-neutral-1200: #141924;
    --color-neutral-1300: #03020d;

    /* Ably orange */
    --color-orange-100: #fff5f1;
    --color-orange-200: #ffe3d8;
    --color-orange-300: #ffc4ae;
    --color-orange-400: #ff9c79;
    --color-orange-500: #ff723f;
    --color-orange-600: #ff5416;
    --color-orange-700: #ff2739;
    --color-orange-800: #e40000;
    --color-orange-900: #b82202;
    --color-orange-1000: #751500;
    --color-orange-1100: #2a0b00;

    /* Secondary colours */
    --color-yellow-100: #fffbef;
    --color-yellow-200: #fff0ba;
    --color-yellow-300: #ffe27c;
    --color-yellow-400: #ffd43d;
    --color-yellow-500: #f8c100;
    --color-yellow-600: #e8a700;
    --color-yellow-700: #ac8600;
    --color-yellow-800: #654f00;
    --color-yellow-900: #291c01;
    --color-green-100: #f1fff1;
    --color-green-200: #b8ffbb;
    --color-green-300: #80ff85;
    --color-green-400: #08ff13;
    --color-green-500: #00e80b;
    --color-green-600: #00c008;
    --color-green-700: #008e06;
    --color-green-800: #005303;
    --color-green-900: #002a02;
    --color-blue-100: #f1fbff;
    --color-blue-200: #b8eaff;
    --color-blue-300: #80d9ff;
    --color-blue-400: #4ad4ff;
    --color-blue-500: #2cc0ff;
    --color-blue-600: #00a5ec;
    --color-blue-700: #0284cd;
    --color-blue-800: #004b75;
    --color-blue-900: #001b2a;
    --color-violet-100: #f7f2fe;
    --color-violet-200: #d8bcfb;
    --color-violet-300: #b986f8;
    --color-violet-400: #9951f5;
    --color-violet-500: #7a1bf2;
    --color-violet-600: #5f0bc9;
    --color-violet-700: #460894;
    --color-violet-800: #2d055e;
    --color-violet-900: #130228;
    --color-pink-100: #fff1fc;
    --color-pink-200: #ffb8f1;
    --color-pink-300: #ff80e6;
    --color-pink-400: #ff47db;
    --color-pink-500: #ff17d2;
    --color-pink-600: #d400ab;
    --color-pink-700: #9c007e;
    --color-pink-800: #630050;
    --color-pink-900: #2a0022;

    /* GUI colours */
    /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
    --color-gui-blue-default-light: #006edc;
    --color-gui-blue-hover-light: #0862b9;
    --color-gui-blue-active-light: #074095;
    --color-gui-blue-default-dark: #4da6ff;
    --color-gui-blue-hover-dark: #2894ff;
    --color-gui-blue-active-dark: #0080ff;
    --color-gui-blue-focus: #80b9f2;
    --color-gui-disabled-light: #afb9c5;
    --color-gui-disabled-dark: #676b7a;
    --color-gui-success-green: #11cb24;
    --color-gui-error-red: #fb0c0c;
    --color-gui-focus: #80b9f2;
    --color-gui-focus-outline: #80b9f2;
    --color-gui-visited: #4887c2;

    /* Colours replaced by neutral colours */
    --color-white: var(--color-neutral-000);
    --color-extra-light-grey: var(--color-neutral-100);
    --color-light-grey: var(--color-neutral-200);
    --color-mid-grey: var(--color-neutral-500);
    --color-dark-grey: var(--color-neutral-800);
    --color-charcoal-grey: var(--color-neutral-1000);
    --color-cool-black: var(--color-neutral-1300);

    /* Colours replaced by orange colours */
    --color-active-orange: var(--color-orange-600);
    --color-bright-red: var(--color-orange-700);
    --color-red-orange: var(--color-orange-800);

    /* Colours replaced by secondary colours */
    --color-electric-cyan: var(--color-blue-400);
    --color-zingy-green: var(--color-green-400);
    --color-jazzy-pink: var(--color-pink-500);

    /* Colours replaced by GUI colours */
    --color-gui-default: var(--color-gui-blue-default-light);
    --color-gui-hover: var(--color-gui-blue-hover-light);
    --color-gui-active: var(--color-gui-blue-active-light);
    --color-gui-error: var(--color-gui-error-red);
    --color-gui-success: var(--color-gui-success-green);
    --color-gui-default-dark: var(--color-gui-blue-default-dark);
    --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
    --color-gui-active-dark: var(--color-gui-blue-active-dark);

    /* flat colors for social icons */
    --icon-color-linkedin: #1269bf;
    --icon-color-twitter: #2caae1;
    --icon-color-glassdoor: #0baa41;
    --icon-color-github: #000000;
    --icon-color-discord: #5865f2;
    --icon-color-stackoverflow: #f48024;
    --icon-color-youtube: #ff0000;

    --gradient-active-orange: linear-gradient(
      61.2deg,
      var(--color-active-orange) 10.46%,
      #fe5215 38.63%,
      #fc4a13 54.38%,
      #f73c10 67.07%,
      #f1280a 78.13%,
      #e90f04 88.02%,
      var(--color-red-orange) 92.73%
    );

    --gradient-priority-button: linear-gradient(
      61.2deg,
      var(--color-active-orange) 5%,
      #fe5215 19%,
      #fc4a13 27%,
      #f73c10 33%,
      #f1280a 39%,
      #e90f04 44%,
      var(--color-orange-800) 50%
    );

    /* Used for smooth transitions from gradient to non-gradient backgrounds */
    --gradient-transparent: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0)
    );

    --gradient-hot-pink: linear-gradient(
      80.2deg,
      var(--color-orange-700) 0%,
      var(--color-jazzy-pink) 100%
    );

    --fs-title-xl: 3rem;
    --fs-title: 2.75rem;
    --fs-title-xs: 2.5rem;
    --fs-h1-xl: 2.5rem;
    --fs-h1: 2.25rem;
    --fs-h1-xs: 2rem;

    --fs-h2-xl: 2.125rem;
    --fs-h2: 2rem;
    --fs-h2-xs: 1.75rem;

    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-h5: 1rem;

    --fs-p1: 1rem;
    --fs-p2: 0.938rem;
    --fs-p3: 0.875rem;
    --fs-p4: 0.813rem;
    --fs-standfirst-xl: 2.25rem;
    --fs-standfirst: 1.5rem;
    --fs-sub-header: 1.125rem;
    --fs-sub-header-xs: 1.063rem;
    --fs-overline1: 0.875rem;
    --fs-overline2: 0.75rem;
    --fs-label1: 1rem;
    --fs-label2: 0.938rem;
    --fs-label3: 0.875rem;
    --fs-label4: 0.813rem;
    --fs-quote: 1.25rem;
    --fs-code: 0.813rem;
    --fs-code2: 0.688rem;

    --lh-none: 1;
    --lh-dense: 1.125;
    --lh-min-normal: 1.2;
    --lh-snug: 1.4;
    --lh-relaxed: 1.6;

    --ls-tighten-0_025: -0.025em;
    --ls-tighten-0_02: -0.02em;
    --ls-tighten-0_015: -0.015em;
    --ls-tighten-0_01: -0.01em;
    --ls-tighten-0_005: -0.005em;
    --ls-tighten-0_0025: -0.0025em;
    --ls-tighten-0_0015: -0.0015em;
    --ls-widen-0_1: 0.1em;
    --ls-widen-0_16: 0.16em;
    --ls-widen-0_15: 0.15em;
    --ls-widen-0_04: 0.04em;

    --spacing-0: 0px;
    --spacing-1: 1px;
    --spacing-2: 0.125rem;
    --spacing-4: 0.25rem;
    --spacing-6: 0.375rem;
    --spacing-8: 0.5rem;
    --spacing-12: 0.75rem;
    --spacing-14: 0.875rem;
    --spacing-16: 1rem;
    --spacing-20: 1.25rem;
    --spacing-24: 1.5rem;
    --spacing-32: 2rem;
    --spacing-36: 2.25rem;
    --spacing-40: 2.5rem;
    --spacing-48: 3rem;
    --spacing-64: 4rem;
    --spacing-72: 4.5rem;
    --spacing-80: 5rem;
    --spacing-88: 5.5rem;
    --spacing-96: 6rem;
    --spacing-128: 8rem;
    --spacing-160: 10rem;
    --spacing-256: 16rem;

    --spacing-btn-small: 0.875rem 1.25rem; /* 14px 16px */
    --spacing-btn-xsmall: 0.875rem 1rem; /* 14px 16px */
    --spacing-btn: 0.875rem 1.5rem; /* 14px 24px */
    --spacing-btn-large: 0.875rem 1.75rem; /* 14px 28px */
    --spacing-menu-row: 0.625rem 0.5rem 0.6875rem; /* 10px 8px 11px */
    --spacing-menu-row-snug: 0.4375rem 0.5rem 0.375rem; /* 7px 8px 6px */
    --spacing-menu-row-title: 0.6875rem 0.5rem; /* 11px 8px */
    --spacing-media: 0.5rem; /* 8px */
    --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
    --spacing-overline: 0.6875rem 0; /* 11px 0 */

    /* In components, when looking at implementing viewport margin and spacing between elements,
       the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
       alternatively, look for ui-grid-* helpers. */
    --bp-xs: 428px; /* gutters 8px, side-margin 24px */
    --bp-sm: 768px; /* gutters 16px, side-margin 32px */
    --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
    --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
    --bp-xl: 1440px; /* gutters 32px, side-margin 64px */

    /* Page stacking context. If components create new stacking contexts z-index values should be defined within them. */
    --stacking-context-page-meganav: 100;

    /* Expose component values for cross-component usage */
    --ui-meganav-height: 4rem;
  }
}