/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --4pt-bold: var(--colour-stroke); /* @kind color */
  --brand-100: rgb(182,236,234); /* @kind color */
  --brand-700: rgb(15,84,82); /* @kind color */
  --brand-accent-1-darker: rgb(0,142,151); /* @kind color */
  --brand-accent-1-lighter: rgb(63,211,206); /* @kind color */
  --brand-accent-1: rgb(0,176,165); /* @kind color */
  --brand-accent-2: rgb(255,194,51); /* @kind color */
  --brand-accent-3: rgb(246,146,32); /* @kind color */
  --brand-accent-4: rgb(240,90,38); /* @kind color */
  --brand-accent-5-darker: rgb(0,47,55); /* @kind color */
  --brand-accent-5: rgb(0,96,114); /* @kind color */
  --brand-background-1-rest: var(--colors-brand-80); /* @kind color */
  --brand-dark-1: rgb(67,39,59); /* @kind color */
  --brand-dark-2: rgb(67,39,59); /* @kind color */
  --brand-light-1: rgb(255,255,255); /* @kind color */
  --brand-light-2: rgb(249,244,232); /* @kind color */
  --cd-eggshell: rgb(249,244,232); /* @kind color */
  --colors-brand-100: rgb(71,158,245); /* @kind color */
  --colors-brand-80: rgb(15,108,189); /* @kind color */
  --colors-grey-black: rgb(0,0,0); /* @kind color */
  --colors-grey-white: rgb(255,255,255); /* @kind color */
  --colour-button-teal-shadow: var(--brand-accent-5); /* @kind color */
  --colour-button-teal: var(--brand-accent-1-lighter); /* @kind color */
  --colour-button-yellow-shadow: rgb(199,85,3); /* @kind color */
  --colour-button-yellow: var(--brand-accent-2); /* @kind color */
  --colour-stroke: var(--brand-dark-1); /* @kind color */
  --colour-surface-brand-2: var(--brand-accent-2); /* @kind color */
  --colour-surface-brand: var(--brand-accent-1); /* @kind color */
  --colour-surface-invert: var(--brand-accent-5); /* @kind color */
  --colour-surface-primary: var(--brand-light-1); /* @kind color */
  --colour-surface-secondary: var(--brand-light-2); /* @kind color */
  --colour-surface-tertiary: var(--brand-dark-2); /* @kind color */
  --colour-text-invert: var(--brand-light-1); /* @kind color */
  --colour-text-link: var(--brand-accent-1-darker); /* @kind color */
  --colour-text-primary: var(--brand-dark-1); /* @kind color */
  --colour-text-secondary: var(--brand-dark-2); /* @kind color */
  --family-body: "Poppins"; /* @kind font */
  --family-headings: "Poppins"; /* @kind font */
  --font-weight-extra-bold: "Extra Bold"; /* @kind other */
  --font-weight-regular: "Regular"; /* @kind other */
  --neutral-900: rgb(26,26,26); /* @kind color */
  --neutral-foreground-on-color-rest: var(--colors-grey-white); /* @kind color */
  --spacing-l: 32;
  --spacing-m: 24;
  --spacing-none: 0;
  --spacing-s: 16;
  --spacing-xl: 48;
  --spacing-xs: 12;
  --spacing-xxl: 60;
  --spacing-xxs: 4;
  --spacing-xxxl: 72;
  --spacing-xxxs: 2;
  --stroke-primary: var(--brand-100); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --4pt-bold: var(--colour-stroke); /* @kind color */
  --brand-background-1-rest: var(--colors-brand-100); /* @kind color */
  --colour-button-teal-shadow: var(--brand-accent-5); /* @kind color */
  --colour-button-teal: var(--brand-accent-1-darker); /* @kind color */
  --colour-button-yellow-shadow: rgb(199,85,3); /* @kind color */
  --colour-button-yellow: var(--brand-accent-4); /* @kind color */
  --colour-stroke: var(--brand-dark-1); /* @kind color */
  --colour-surface-brand-2: rgb(0,142,151); /* @kind color */
  --colour-surface-brand: var(--brand-accent-2); /* @kind color */
  --colour-surface-invert: var(--brand-light-2); /* @kind color */
  --colour-surface-primary: var(--brand-accent-5); /* @kind color */
  --colour-surface-secondary: var(--brand-accent-5-darker); /* @kind color */
  --colour-surface-tertiary: var(--brand-light-2); /* @kind color */
  --colour-text-invert: var(--brand-dark-2); /* @kind color */
  --colour-text-link: var(--brand-accent-1-lighter); /* @kind color */
  --colour-text-primary: var(--brand-light-1); /* @kind color */
  --colour-text-secondary: var(--brand-light-2); /* @kind color */
  --neutral-foreground-on-color-rest: var(--colors-grey-black); /* @kind color */
  --stroke-primary: var(--brand-700); /* @kind color */
}

:root[data-mode="elevated"] {
  --brand-background-1-rest: var(--colors-brand-100); /* @kind color */
  --neutral-foreground-on-color-rest: var(--colors-grey-black); /* @kind color */
}