@import url("../shared/tokens.css");
@import url("../shared/main.css");

:root {
  /* CORE - SDS */
  --color-base-light: 255 255 255;
  --color-base-dark: 20 24 31;
  --color-base-balanced-100: 244 243 252;
  --color-base-balanced-200: 201 194 240;
  --color-base-balanced-300: 159 145 227;
  --color-base-balanced-400: 116 96 215;
  --color-base-balanced-500: 77 51 204;
  --color-base-balanced-600: 61 41 163;
  --color-base-balanced-700: 46 31 122;
  --color-base-balanced-800: 32 21 86;
  --color-base-balanced-900: 18 12 49;
  --color-base-brave-100: 245 246 250;
  --color-base-brave-200: 207 212 231;
  --color-base-brave-300: 127 144 184;
  --color-base-brave-400: 66 89 139;
  --color-base-brave-500: 0 34 112;
  --color-base-brave-600: 0 30 97;
  --color-base-brave-700: 0 25 82;
  --color-base-brave-800: 0 21 66;
  --color-base-brave-900: 0 16 51;
  --color-base-energized-100: 240 247 255;
  --color-base-energized-200: 178 217 255;
  --color-base-energized-300: 117 186 255;
  --color-base-energized-400: 56 156 255;
  --color-base-energized-500: 0 128 255;
  --color-base-energized-600: 0 101 204;
  --color-base-energized-700: 0 75 153;
  --color-base-energized-800: 0 75 153;
  --color-base-energized-900: 0 30 61;
  --color-base-fair-100: 244 251 251;
  --color-base-fair-200: 198 236 236;
  --color-base-fair-300: 152 221 221;
  --color-base-fair-400: 152 221 221;
  --color-base-fair-500: 64 191 191;
  --color-base-fair-600: 51 153 153;
  --color-base-fair-700: 38 115 115;
  --color-base-fair-800: 27 80 80;
  --color-base-fair-900: 15 46 46;
  --color-base-fluent-100: 253 241 246;
  --color-base-fluent-200: 247 186 211;
  --color-base-fluent-300: 247 186 211;
  --color-base-fluent-400: 235 76 142;
  --color-base-fluent-500: 233 0 97;
  --color-base-fluent-600: 204 0 85;
  --color-base-fluent-700: 153 0 64;
  --color-base-fluent-800: 107 0 45;
  --color-base-fluent-900: 61 0 26;
  --color-base-royal-100: 244 243 252;
  --color-base-royal-200: 201 194 240;
  --color-base-royal-300: 159 145 227;
  --color-base-royal-400: 116 96 215;
  --color-base-royal-500: 77 51 204;
  --color-base-royal-600: 61 41 163;
  --color-base-royal-700: 46 31 122;
  --color-base-royal-800: 32 21 86;
  --color-base-royal-900: 18 12 49;
  --color-state-assertive-100: 255 242 242;
  --color-state-assertive-200: 255 178 178;
  --color-state-assertive-300: 255 117 117;
  --color-state-assertive-400: 252 54 54;
  --color-state-assertive-500: 245 0 0;
  --color-state-assertive-600: 199 0 0;
  --color-state-assertive-700: 153 0 0;
  --color-state-assertive-800: 107 0 0;
  --color-state-assertive-900: 61 0 0;
  --color-state-mild-100: 255 247 238;
  --color-state-mild-200: 255 221 178;
  --color-state-mild-300: 255 186 102;
  --color-state-mild-400: 255 150 26;
  --color-state-mild-500: 209 115 0;
  --color-state-mild-600: 173 95 0;
  --color-state-mild-700: 138 75 0;
  --color-state-mild-800: 92 50 0;
  --color-state-mild-900: 61 33 0;
  --color-state-positive-100: 245 251 244;
  --color-state-positive-200: 205 236 198;
  --color-state-positive-300: 156 216 141;
  --color-state-positive-400: 106 197 83;
  --color-state-positive-500: 73 157 52;
  --color-state-positive-600: 61 130 44;
  --color-state-positive-700: 49 104 34;
  --color-state-positive-800: 38 80 27;
  --color-state-positive-900: 22 46 15;
  --color-grey-stable-100: 247 250 255;
  --color-grey-stable-200: 237 242 253;
  --color-grey-stable-300: 230 236 249;
  --color-grey-stable-400: 226 232 243;
  --color-grey-stable-500: 221 227 238;
  --color-grey-stable-600: 155 171 202;
  --color-grey-stable-700: 76 99 143;
  --color-grey-stable-800: 46 60 86;
  --color-grey-stable-900: 21 28 40;
  --color-alpha-dark-80: 20 24 31 / 80%;
  --color-alpha-dark-64: 20 24 31 / 64%;
  --color-alpha-dark-48: 20 24 31 / 48%;
  --color-alpha-dark-32: 20 24 31 / 32%;
  --color-alpha-dark-28: 20 24 31 / 28%;
  --color-alpha-dark-20: 20 24 31 / 20%;
  --color-alpha-dark-16: 20 24 31 / 16%;
  --color-alpha-dark-12: 20 24 31 / 12%;
  --color-alpha-dark-8: 20 24 31 / 8%;
  --color-alpha-dark-4: 20 24 31 / 4%;
  --color-alpha-light-80: 255 255 255 / 80%;
  --color-alpha-light-64: 255 255 255 / 64%;
  --color-alpha-light-48: 255 255 255 / 48%;
  --color-alpha-light-32: 255 255 255 / 32%;
  --color-alpha-light-28: 255 255 255 / 28%;
  --color-alpha-light-20: 255 255 255 / 20%;
  --color-alpha-light-16: 255 255 255 / 16%;
  --color-alpha-light-12: 255 255 255 / 12%;
  --color-alpha-light-8: 255 255 255 / 8%;
  --color-alpha-light-4: 255 255 255 / 4%;
  --font-family-heading: "Switzer Variable", sans-serif;
  --font-family-body: "Inter", sans-serif;
  --font-family-code: "Roboto Mono", monospace;

  /* ALIAS */
  --action-100: rgb(var(--color-base-brave-100));
  --action-200: rgb(var(--color-base-brave-200));
  --action-300: rgb(var(--color-base-brave-300));
  --action-400: rgb(var(--color-base-brave-400));
  --action-500: rgb(var(--color-base-brave-500));
  --action-600: rgb(var(--color-base-brave-600));
  --action-700: rgb(var(--color-base-brave-700));
  --action-800: rgb(var(--color-base-brave-800));
  --action-900: rgb(var(--color-base-brave-900));
  --neutral-0: rgb(var(--color-base-light));
  --neutral-100: rgb(var(--color-grey-stable-100));
  --neutral-200: rgb(var(--color-grey-stable-200));
  --neutral-300: rgb(var(--color-grey-stable-300));
  --neutral-400: rgb(var(--color-grey-stable-400));
  --neutral-500: rgb(var(--color-grey-stable-500));
  --neutral-600: rgb(var(--color-grey-stable-600));
  --neutral-700: rgb(var(--color-grey-stable-700));
  --neutral-800: rgb(var(--color-grey-stable-800));
  --neutral-900: rgb(var(--color-grey-stable-900));
  --neutral-1000: rgb(var(--color-base-dark));
  --error-100: rgb(var(--color-state-assertive-100));
  --error-200: rgb(var(--color-state-assertive-200));
  --error-300: rgb(var(--color-state-assertive-300));
  --error-400: rgb(var(--color-state-assertive-400));
  --error-500: rgb(var(--color-state-assertive-500));
  --error-600: rgb(var(--color-state-assertive-600));
  --error-700: rgb(var(--color-state-assertive-700));
  --error-800: rgb(var(--color-state-assertive-800));
  --error-900: rgb(var(--color-state-assertive-900));
  --feedback-100: rgb(var(--color-base-royal-100));
  --feedback-200: rgb(var(--color-base-royal-200));
  --feedback-300: rgb(var(--color-base-royal-300));
  --feedback-400: rgb(var(--color-base-royal-400));
  --feedback-500: rgb(var(--color-base-royal-500));
  --feedback-600: rgb(var(--color-base-royal-600));
  --feedback-700: rgb(var(--color-base-royal-700));
  --feedback-800: rgb(var(--color-base-royal-800));
  --feedback-900: rgb(var(--color-base-royal-900));
  --highlight-100: rgb(var(--color-base-energized-100));
  --highlight-200: rgb(var(--color-base-energized-200));
  --highlight-300: rgb(var(--color-base-energized-300));
  --highlight-400: rgb(var(--color-base-energized-400));
  --highlight-500: rgb(var(--color-base-energized-500));
  --highlight-600: rgb(var(--color-base-energized-600));
  --highlight-700: rgb(var(--color-base-energized-700));
  --highlight-800: rgb(var(--color-base-energized-800));
  --highlight-900: rgb(var(--color-base-energized-900));
  --information-100: rgb(var(--color-base-balanced-100));
  --information-200: rgb(var(--color-base-balanced-200));
  --information-300: rgb(var(--color-base-balanced-300));
  --information-400: rgb(var(--color-base-balanced-400));
  --information-500: rgb(var(--color-base-balanced-500));
  --information-600: rgb(var(--color-base-balanced-600));
  --information-700: rgb(var(--color-base-balanced-700));
  --information-800: rgb(var(--color-base-balanced-800));
  --information-900: rgb(var(--color-base-balanced-900));
  --success-100: rgb(var(--color-state-positive-100));
  --success-200: rgb(var(--color-state-positive-200));
  --success-300: rgb(var(--color-state-positive-300));
  --success-400: rgb(var(--color-state-positive-400));
  --success-500: rgb(var(--color-state-positive-500));
  --success-600: rgb(var(--color-state-positive-600));
  --success-700: rgb(var(--color-state-positive-700));
  --success-800: rgb(var(--color-state-positive-800));
  --success-900: rgb(var(--color-state-positive-900));
  --transparent-dark-100: rgb(var(--color-alpha-dark-4));
  --transparent-dark-200: rgb(var(--color-alpha-dark-8));
  --transparent-dark-300: rgb(var(--color-alpha-dark-12));
  --transparent-dark-400: rgb(var(--color-alpha-dark-16));
  --transparent-dark-500: rgb(var(--color-alpha-dark-20));
  --transparent-dark-600: rgb(var(--color-alpha-dark-28));
  --transparent-dark-700: rgb(var(--color-alpha-dark-32));
  --transparent-dark-800: rgb(var(--color-alpha-dark-48));
  --transparent-dark-900: rgb(var(--color-alpha-dark-64));
  --transparent-light-100: rgb(var(--color-alpha-light-4));
  --transparent-light-200: rgb(var(--color-alpha-light-8));
  --transparent-light-300: rgb(var(--color-alpha-light-12));
  --transparent-light-400: rgb(var(--color-alpha-light-16));
  --transparent-light-500: rgb(var(--color-alpha-light-20));
  --transparent-light-600: rgb(var(--color-alpha-light-28));
  --transparent-light-700: rgb(var(--color-alpha-light-32));
  --transparent-light-800: rgb(var(--color-alpha-light-48));
  --transparent-light-900: rgb(var(--color-alpha-light-64));
  --warning-100: rgb(var(--color-state-mild-100));
  --warning-200: rgb(var(--color-state-mild-200));
  --warning-300: rgb(var(--color-state-mild-300));
  --warning-400: rgb(var(--color-state-mild-400));
  --warning-500: rgb(var(--color-state-mild-500));
  --warning-600: rgb(var(--color-state-mild-600));
  --warning-700: rgb(var(--color-state-mild-700));
  --warning-800: rgb(var(--color-state-mild-800));
  --warning-900: rgb(var(--color-state-mild-900));
  --ai-1-100: rgb(var(--color-base-balanced-100));
  --ai-1-200: rgb(var(--color-base-balanced-200));
  --ai-1-300: rgb(var(--color-base-balanced-300));
  --ai-1-400: rgb(var(--color-base-balanced-400));
  --ai-1-500: rgb(var(--color-base-balanced-500));
  --ai-1-600: rgb(var(--color-base-balanced-600));
  --ai-1-700: rgb(var(--color-base-balanced-700));
  --ai-1-800: rgb(var(--color-base-balanced-800));
  --ai-1-900: rgb(var(--color-base-balanced-900));
  --ai-2-100: rgb(var(--color-base-energized-100));
  --ai-2-200: rgb(var(--color-base-energized-200));
  --ai-2-300: rgb(var(--color-base-energized-300));
  --ai-2-400: rgb(var(--color-base-energized-400));
  --ai-2-500: rgb(var(--color-base-energized-500));
  --ai-2-600: rgb(var(--color-base-energized-600));
  --ai-2-700: rgb(var(--color-base-energized-700));
  --ai-2-800: rgb(var(--color-base-energized-800));
  --ai-2-900: rgb(var(--color-base-energized-900));
  --extra-1-100: rgb(var(--color-base-fair-100));
  --extra-1-200: rgb(var(--color-base-fair-200));
  --extra-1-300: rgb(var(--color-base-fair-300));
  --extra-1-400: rgb(var(--color-base-fair-400));
  --extra-1-500: rgb(var(--color-base-fair-500));
  --extra-1-600: rgb(var(--color-base-fair-600));
  --extra-1-700: rgb(var(--color-base-fair-700));
  --extra-1-800: rgb(var(--color-base-fair-800));
  --extra-1-900: rgb(var(--color-base-fair-900));
  --extra-2-100: rgb(var(--color-base-fluent-100));
  --extra-2-200: rgb(var(--color-base-fluent-200));
  --extra-2-300: rgb(var(--color-base-fluent-300));
  --extra-2-400: rgb(var(--color-base-fluent-400));
  --extra-2-500: rgb(var(--color-base-fluent-500));
  --extra-2-600: rgb(var(--color-base-fluent-600));
  --extra-2-700: rgb(var(--color-base-fluent-700));
  --extra-2-800: rgb(var(--color-base-fluent-800));
  --extra-2-900: rgb(var(--color-base-fluent-900));
  --border-radius-full: var(--scale-full);
  --border-radius-large: var(--scale-12);
  --border-radius-default: var(--scale-8);
  --border-radius-small: var(--scale-4);
  --border-radius-none: var(--scale-0);
  --border-width-large: var(--scale-4);
  --border-width-default: var(--scale-2);
  --border-width-small: var(--scale-1);
  --border-width-none: var(--scale-0);
  --elevation-offset-x-large: var(--scale-4);
  --elevation-offset-x-default: var(--scale-2);
  --elevation-offset-x-small: var(--scale-1);
  --elevation-offset-x-none: var(--scale-0);
  --elevation-offset-y-large: var(--scale-4);
  --elevation-offset-y-default: var(--scale-2);
  --elevation-offset-y-small: var(--scale-1);
  --elevation-offset-y-none: var(--scale-0);
  --elevation-blur-large: var(--scale-12);
  --elevation-blur-default: var(--scale-8);
  --elevation-blur-small: var(--scale-2);
  --elevation-blur-none: var(--scale-0);
  --elevation-spread-large: var(--scale-16);
  --elevation-spread-default: var(--scale-8);
  --elevation-spread-small: var(--scale-2);
  --elevation-spread-none: var(--scale-0);
  --text-family-heading: var(--font-family-heading);
  --text-family-body: var(--font-family-body);
  --text-family-code: var(--font-family-code);
  --text-weight-bold: var(--font-weight-700);
  --text-weight-regular: var(--font-weight-500);
  --text-weight-light: var(--font-weight-500);
  --text-size-h1-large: var(--font-scale-44);
  --text-size-h1-default: var(--font-scale-40);
  --text-size-h1-small: var(--font-scale-36);
  --text-size-h2-large: var(--font-scale-32);
  --text-size-h2-default: var(--font-scale-28);
  --text-size-h2-small: var(--font-scale-24);
  --text-size-h3-large: var(--font-scale-28);
  --text-size-h3-default: var(--font-scale-24);
  --text-size-h3-small: var(--font-scale-20);
  --text-size-h4-large: var(--font-scale-24);
  --text-size-h4-default: var(--font-scale-20);
  --text-size-h4-small: var(--font-scale-16);
  --text-size-h5-large: var(--font-scale-20);
  --text-size-h5-default: var(--font-scale-18);
  --text-size-h5-small: var(--font-scale-16);
  --text-size-h6-large: var(--font-scale-18);
  --text-size-h6-default: var(--font-scale-16);
  --text-size-h6-small: var(--font-scale-14);
  --text-size-lead-large: var(--font-scale-20);
  --text-size-lead-default: var(--font-scale-16);
  --text-size-lead-small: var(--font-scale-14);
  --text-size-body-large: var(--font-scale-16);
  --text-size-body-default: var(--font-scale-14);
  --text-size-body-small: var(--font-scale-14);
  --text-size-button-large: var(--font-scale-16);
  --text-size-button-default: var(--font-scale-14);
  --text-size-button-small: var(--font-scale-14);
  --text-size-label-large: var(--font-scale-13);
  --text-size-label-default: var(--font-scale-12);
  --text-size-label-small: var(--font-scale-12);
  --text-size-meta-large: var(--font-scale-13);
  --text-size-meta-default: var(--font-scale-12);
  --text-size-meta-small: var(--font-scale-12);
  --text-size-code-large: var(--font-scale-14);
  --text-size-code-default: var(--font-scale-13);
  --text-size-code-small: var(--font-scale-12);
  --customisable-heading-default: var(--neutral-1000);
  --customisable-heading-inverse: var(--neutral-100);
  --customisable-brand-default: var(--action-500);
  --customisable-brand-inverse: var(--action-600);
  --customisable-contrast-default: var(--neutral-700);
  --customisable-contrast-inverse: var(--neutral-900);
  --customisable-border-radius-action: var(--border-radius-small);
  --customisable-border-radius-card: var(--border-radius-small);
  --customisable-border-radius-focus-bold: var(--border-radius-default);
  --customisable-border-radius-focus-default: var(--border-radius-small);
}

@font-face {
  font-family: "Switzer Variable";
  src: url("https://cdn.scordigital.solutions/assets/fonts/Switzer-Semibold.woff2")
    format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: Inter;
  src: url("https://cdn.scordigital.solutions/assets/fonts/Inter-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("https://cdn.scordigital.solutions/assets/fonts/Inter-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("https://cdn.scordigital.solutions/assets/fonts/RobotoMono-Regular.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("https://cdn.scordigital.solutions/assets/fonts/RobotoMono-Bold.woff2")
    format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}