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

:root {
  --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%;
  --color-base-dark: 30 38 43;
  --color-base-light: 255 255 255;
  --color-base-brave-900: 19 23 37;
  --color-base-brave-800: 26 34 63;
  --color-base-brave-700: 32 43 87;
  --color-base-brave-600: 41 58 123;
  --color-base-brave-500: 51 72 160;
  --color-base-brave-400: 97 120 198;
  --color-base-brave-300: 134 154 213;
  --color-base-brave-200: 186 198 232;
  --color-base-brave-100: 240 242 250;
  --color-base-balanced-900: 31 19 42;
  --color-base-balanced-800: 49 31 66;
  --color-base-balanced-700: 69 44 94;
  --color-base-balanced-600: 90 56 122;
  --color-base-balanced-500: 110 69 149;
  --color-base-balanced-400: 143 101 183;
  --color-base-balanced-300: 176 146 204;
  --color-base-balanced-200: 210 192 226;
  --color-base-balanced-100: 247 245 250;
  --color-base-energized-900: 49 11 10;
  --color-base-energized-800: 88 19 15;
  --color-base-energized-700: 126 27 19;
  --color-base-energized-600: 166 35 23;
  --color-base-energized-500: 209 44 27;
  --color-base-energized-400: 234 67 61;
  --color-base-energized-300: 239 109 109;
  --color-base-energized-200: 244 170 172;
  --color-base-energized-100: 253 238 239;
  --color-base-fair-900: 61 61 0;
  --color-base-fair-800: 111 112 0;
  --color-base-fair-700: 147 147 0;
  --color-base-fair-600: 182 183 0;
  --color-base-fair-500: 217 218 0;
  --color-base-fair-400: 231 232 53;
  --color-base-fair-300: 230 231 120;
  --color-base-fair-200: 240 241 176;
  --color-base-fair-100: 252 252 241;
  --color-base-fluent-900: 57 4 39;
  --color-base-fluent-800: 100 7 67;
  --color-base-fluent-700: 141 12 96;
  --color-base-fluent-600: 190 14 129;
  --color-base-fluent-500: 236 19 161;
  --color-base-fluent-400: 231 80 179;
  --color-base-fluent-300: 240 133 203;
  --color-base-fluent-200: 254 180 225;
  --color-base-fluent-100: 253 241 249;
  --color-base-royal-900: 30 19 41;
  --color-base-royal-800: 48 30 66;
  --color-base-royal-700: 69 43 94;
  --color-base-royal-600: 90 56 122;
  --color-base-royal-500: 110 69 149;
  --color-base-royal-400: 143 101 183;
  --color-base-royal-300: 176 146 204;
  --color-base-royal-200: 209 192 225;
  --color-base-royal-100: 247 244 250;
  --color-grey-stable-900: 21 25 29;
  --color-grey-stable-800: 56 66 76;
  --color-grey-stable-700: 84 99 114;
  --color-grey-stable-600: 167 178 189;
  --color-grey-stable-500: 216 221 226;
  --color-grey-stable-400: 225 229 233;
  --color-grey-stable-300: 234 237 239;
  --color-grey-stable-200: 243 244 246;
  --color-grey-stable-100: 249 249 250;
  --color-state-positive-900: 6 52 55;
  --color-state-positive-800: 8 74 78;
  --color-state-positive-700: 11 96 101;
  --color-state-positive-600: 13 113 119;
  --color-state-positive-500: 15 131 137;
  --color-state-positive-400: 46 179 187;
  --color-state-positive-300: 99 209 216;
  --color-state-positive-200: 173 231 234;
  --color-state-positive-100: 243 251 252;
  --color-state-mild-900: 61 29 0;
  --color-state-mild-800: 91 42 0;
  --color-state-mild-700: 127 60 0;
  --color-state-mild-600: 163 76 0;
  --color-state-mild-500: 184 94 14;
  --color-state-mild-400: 255 128 15;
  --color-state-mild-300: 255 167 86;
  --color-state-mild-200: 255 206 163;
  --color-state-mild-100: 255 247 240;
  --color-state-assertive-900: 59 1 5;
  --color-state-assertive-800: 114 2 9;
  --color-state-assertive-700: 154 3 12;
  --color-state-assertive-600: 194 4 16;
  --color-state-assertive-500: 234 5 19;
  --color-state-assertive-400: 250 55 67;
  --color-state-assertive-300: 252 120 128;
  --color-state-assertive-200: 253 185 189;
  --color-state-assertive-100: 254 235 236;
  --font-family-heading: "Inter", 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-400);
  --text-weight-light: var(--font-weight-400);
  --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: rgb(var(--color-base-dark));
  --customisable-heading-inverse: rgb(var(--color-grey-stable-300));
  --customisable-brand-default: rgb(var(--color-base-energized-600));
  --customisable-brand-inverse: rgb(var(--color-base-energized-700));
  --customisable-contrast-default: rgb(var(--color-base-royal-900));
  --customisable-contrast-inverse: rgb(var(--color-grey-stable-900));
  --customisable-border-radius-action: var(--scale-8);
  --customisable-border-radius-card: var(--border-radius-small);
  --customisable-border-radius-focus-bold: var(--scale-12);
  --customisable-border-radius-focus-default: var(--scale-8);
}

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

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

@font-face {
  font-family: Inter;
  src: url("https://cdn.scordigital.solutions/assets/fonts/Inter-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-Bold.woff2")
    format("woff2");
  font-weight: 700;
  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;
}
