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

:root {
  --action-default-divider-default: rgb(13,13,13); /* @kind color */
  --action-default-divider-disabled: rgb(217,217,217); /* @kind color */
  --action-default-divider-focus: rgb(54,227,189); /* @kind color */
  --action-default-divider-hover: rgb(89,89,89); /* @kind color */
  --action-default-surface-default: rgb(13,13,13); /* @kind color */
  --action-default-surface-disabled: rgb(217,217,217); /* @kind color */
  --action-default-surface-focus: rgb(13,13,13); /* @kind color */
  --action-default-surface-hover: rgb(89,89,89); /* @kind color */
  --action-default-text-default: rgb(255,255,255); /* @kind color */
  --action-default-text-disabled: rgb(255,255,255); /* @kind color */
  --action-default-text-focus: rgb(255,255,255); /* @kind color */
  --action-default-text-hover: rgb(255,255,255); /* @kind color */
  --action-inverted-divider-disabled: rgb(217,217,217); /* @kind color */
  --action-inverted-text-default: rgb(13,13,13); /* @kind color */
  --action-inverted-text-disabled: rgb(179,179,179); /* @kind color */
  --actions-default-divider: var(--default-divider); /* @kind color */
  --actions-default-surface: var(--default-surface); /* @kind color */
  --actions-default-text-2: var(--default-text); /* @kind color */
  --actions-default-text: var(--default-text); /* @kind color */
  --actions-inverted-divider: var(--inverted-divider); /* @kind color */
  --actions-inverted-surface: var(--inverted-surface); /* @kind color */
  --actions-inverted-text-2: var(--inverted-text); /* @kind color */
  --actions-inverted-text: var(--inverted-text); /* @kind color */
  --background-inverted: rgb(13,13,13); /* @kind color */
  --background-primary-2: rgb(255,255,255); /* @kind color */
  --background-primary-3: rgb(255,255,255); /* @kind color */
  --background-primary-4: rgb(255,255,255); /* @kind color */
  --background-primary-5: rgb(255,255,255); /* @kind color */
  --background-primary-6: rgb(255,255,255); /* @kind color */
  --background-primary: rgb(255,255,255); /* @kind color */
  --body-family-2: "Econ Sans";
  --body-family: "Econ Sans";
  --body-letter-spacing-2: 0;
  --body-letter-spacing: 0;
  --body-normal: "Light";
  --body-weight-bold-2: "Medium";
  --body-weight-bold: "Medium";
  --body-weight-normal-2: "Light";
  --body-weight-normal: "Light";
  --body: "Econ Sans";
  --colour-base-chicago-45: rgb(46,69,184); /* @kind color */
  --colour-greyscale-london-20: rgb(51,51,51); /* @kind color */
  --colour-greyscale-london-40: rgb(102,102,102); /* @kind color */
  --default-corner-radius: 0;
  --default-divider: rgb(13,13,13); /* @kind color */
  --default-surface: rgb(13,13,13); /* @kind color */
  --default-text: rgb(255,255,255); /* @kind color */
  --divider-contrast: rgb(227,18,11); /* @kind color */
  --divider-secondary: rgb(217,217,217); /* @kind color */
  --economistimpact-contrast: rgb(13,13,13); /* @kind color */
  --economistimpact-main-fade: rgb(242,242,242); /* @kind color */
  --economistimpact-main-neutral: rgb(217,217,217); /* @kind color */
  --economistimpact-main: rgb(255,255,255); /* @kind color */
  --font-family-body: var(--body);
  --font-size-body: var(--max-1440px-body);
  --font-size-header-1: var(--max-1440px-header-1);
  --font-size-header-2: var(--max-1440px-header-2);
  --font-size-header-3: var(--max-1440px-header-3);
  --font-size-header-4: var(--max-1440px-header-4);
  --font-size-header-5: var(--max-1440px-header-5);
  --font-size-header-6: var(--max-1440px-header-6);
  --font-size-max-p: 16;
  --font-size-min-p: 14;
  --font-size-small: var(--max-1440px-body-small);
  --font-weight-body: var(--body-normal);
  --headers-family-2: "GT Zirkon";
  --headers-family: "GT Zirkon";
  --headers-letter-spacing-2: -2;
  --headers-letter-spacing: -2;
  --headers-weight-normal-2: "Bold";
  --headers-weight-normal: "Bold";
  --impact-default-text: rgb(255,255,255); /* @kind color */
  --impact-inverted-text: rgb(13,13,13); /* @kind color */
  --inverted-divider: rgb(255,255,255); /* @kind color */
  --inverted-surface: rgb(255,255,255); /* @kind color */
  --inverted-text: rgb(13,13,13); /* @kind color */
  --max-1440px-body-small: 13.33;
  --max-1440px-body: 16;
  --max-1440px-header-1: 47.8;
  --max-1440px-header-2: 39.8;
  --max-1440px-header-3: 33.18;
  --max-1440px-header-4: 27.65;
  --max-1440px-header-5: 23.04;
  --max-1440px-header-6: 19.2;
  --max-spacing-0: 0;
  --max-spacing-10: 56;
  --max-spacing-11: 64;
  --max-spacing-12: 72;
  --max-spacing-13: 80;
  --max-spacing-1: 2;
  --max-spacing-2: 4;
  --max-spacing-3: 6;
  --max-spacing-4: 8;
  --max-spacing-5: 16;
  --max-spacing-6: 24;
  --max-spacing-7: 32;
  --max-spacing-8: 40;
  --max-spacing-9: 48;
  --min-320px-body-small: 11.67;
  --min-320px-body: 14;
  --min-320px-header-1: 41.8;
  --min-320px-header-2: 34.84;
  --min-320px-header-3: 29.03;
  --min-320px-header-4: 24.19;
  --min-320px-header-5: 20.16;
  --min-320px-header-6: 16.8;
  --min-spacing-0: 0;
  --min-spacing-10: 42;
  --min-spacing-11: 48;
  --min-spacing-12: 54;
  --min-spacing-13: 60;
  --min-spacing-1: 1.5;
  --min-spacing-2: 3;
  --min-spacing-3: 4.5;
  --min-spacing-4: 6;
  --min-spacing-5: 12;
  --min-spacing-6: 18;
  --min-spacing-7: 24;
  --min-spacing-8: 30;
  --min-spacing-9: 36;
  --spacing-l4: 40;
  --spacing-max-spacing-base: 8;
  --spacing-max-spacing-l1: 16;
  --spacing-max-spacing-s1: 6;
  --spacing-max-spacing-s2: 4;
  --spacing-min-spacing-l1: 12;
  --spacing-spacing-0: var(--max-spacing-0);
  --spacing-spacing-10: var(--max-spacing-10);
  --spacing-spacing-11: var(--max-spacing-11);
  --spacing-spacing-12: var(--max-spacing-12);
  --spacing-spacing-13: var(--max-spacing-13);
  --spacing-spacing-1: var(--max-spacing-1);
  --spacing-spacing-2-2: 4;
  --spacing-spacing-2: var(--max-spacing-2);
  --spacing-spacing-3: var(--max-spacing-3);
  --spacing-spacing-4: var(--max-spacing-4);
  --spacing-spacing-5-2: var(--spacing-max-spacing-l1);
  --spacing-spacing-5: var(--max-spacing-5);
  --spacing-spacing-6: var(--max-spacing-6);
  --spacing-spacing-7: var(--max-spacing-7);
  --spacing-spacing-8: var(--max-spacing-8);
  --spacing-spacing-9: var(--max-spacing-9);
  --sub-headers-family-2: "Econ Sans";
  --sub-headers-family: "Econ Sans";
  --sub-headers-letter-spacing-2: 0;
  --sub-headers-letter-spacing: 0;
  --sub-headers-weight-normal-2: "Medium";
  --sub-headers-weight-normal: "Medium";
  --surface-inverted-2: rgb(13,13,13); /* @kind color */
  --surface-inverted: rgb(255,255,255); /* @kind color */
  --surface-primary: rgb(242,242,242); /* @kind color */
  --surface-secondary: rgb(233,252,248); /* @kind color */
  --text-inverted-2: rgb(255,255,255); /* @kind color */
  --text-inverted-3: rgb(255,255,255); /* @kind color */
  --text-inverted: rgb(255,255,255); /* @kind color */
  --text-primary-2: rgb(20,31,82); /* @kind color */
  --text-primary-3: rgb(13,13,13); /* @kind color */
  --text-primary-4: rgb(13,13,13); /* @kind color */
  --text-primary-5: rgb(13,13,13); /* @kind color */
  --text-primary: rgb(13,13,13); /* @kind color */
  --thehealthdividend-default-text: rgb(31,46,122); /* @kind color */
  --typographic-normal: var(--font-size-max-p);
}

:root[data-mode="tsp"] {
  --action-default-divider-default: rgb(13,13,13); /* @kind color */
  --action-default-divider-disabled: rgb(217,217,217); /* @kind color */
  --action-default-divider-focus: rgb(54,227,189); /* @kind color */
  --action-default-divider-hover: rgb(89,89,89); /* @kind color */
  --action-default-surface-default: rgb(13,13,13); /* @kind color */
  --action-default-surface-disabled: rgb(217,217,217); /* @kind color */
  --action-default-surface-focus: rgb(13,13,13); /* @kind color */
  --action-default-surface-hover: rgb(89,89,89); /* @kind color */
  --action-default-text-default: rgb(255,255,255); /* @kind color */
  --action-default-text-disabled: rgb(255,255,255); /* @kind color */
  --action-default-text-focus: rgb(255,255,255); /* @kind color */
  --action-default-text-hover: rgb(255,255,255); /* @kind color */
  --action-inverted-divider-disabled: rgb(217,217,217); /* @kind color */
  --action-inverted-text-default: rgb(13,13,13); /* @kind color */
  --action-inverted-text-disabled: rgb(217,217,217); /* @kind color */
  --background-primary-6: rgb(255,255,255); /* @kind color */
  --background-primary: rgb(255,255,255); /* @kind color */
}

:root[data-mode="min-320px"] {
  --font-size-body: var(--min-320px-body);
  --font-size-header-1: var(--min-320px-header-1);
  --font-size-header-2: var(--min-320px-header-2);
  --font-size-header-3: var(--min-320px-header-3);
  --font-size-header-4: var(--min-320px-header-4);
  --font-size-header-5: var(--min-320px-header-5);
  --font-size-header-6: var(--min-320px-header-6);
  --font-size-small: var(--min-320px-body-small);
  --spacing-spacing-0: var(--min-spacing-0);
  --spacing-spacing-10: var(--min-spacing-10);
  --spacing-spacing-11: var(--min-spacing-11);
  --spacing-spacing-12: var(--min-spacing-12);
  --spacing-spacing-13: var(--min-spacing-13);
  --spacing-spacing-1: var(--min-spacing-1);
  --spacing-spacing-2-2: 3;
  --spacing-spacing-2: var(--min-spacing-2);
  --spacing-spacing-3: var(--min-spacing-3);
  --spacing-spacing-4: var(--min-spacing-4);
  --spacing-spacing-5: var(--min-spacing-5);
  --spacing-spacing-6: var(--min-spacing-6);
  --spacing-spacing-7: var(--min-spacing-7);
  --spacing-spacing-8: var(--min-spacing-8);
  --spacing-spacing-9: var(--min-spacing-9);
}

:root[data-mode="inverted"] {
  --economistimpact-contrast: rgb(255,255,255); /* @kind color */
  --economistimpact-main-fade: rgb(26,26,26); /* @kind color */
  --economistimpact-main-neutral: rgb(51,51,51); /* @kind color */
  --economistimpact-main: rgb(13,13,13); /* @kind color */
}

:root[data-mode="mobile"] {
  --spacing-l4: 30;
}

:root[data-mode="min"] {
  --spacing-spacing-5-2: var(--spacing-min-spacing-l1);
  --typographic-normal: var(--font-size-min-p);
}

:root[data-mode="custom"] {
  --body: "Inter";
}

:root[data-mode="new"] {
  --body-family-2: "Economist Sans";
  --body-letter-spacing-2: 0;
  --body-weight-bold-2: "Medium";
  --body-weight-normal-2: "Light";
  --headers-family-2: "GT Zirkon";
  --headers-letter-spacing-2: -2;
  --headers-weight-normal-2: "Bold";
  --sub-headers-family: "Economist Sans";
  --sub-headers-letter-spacing: 0;
  --sub-headers-weight-normal: "Medium";
}

:root[data-mode="hover"] {
  --default-divider: rgb(89,89,89); /* @kind color */
  --default-surface: rgb(89,89,89); /* @kind color */
  --default-text: rgb(255,255,255); /* @kind color */
  --impact-default-text: rgb(255,255,255); /* @kind color */
  --impact-inverted-text: rgb(89,89,89); /* @kind color */
  --inverted-divider: rgb(239,239,239); /* @kind color */
  --inverted-surface: rgb(239,239,239); /* @kind color */
  --inverted-text: rgb(89,89,89); /* @kind color */
  --thehealthdividend-default-text: rgb(31,46,122); /* @kind color */
}

:root[data-mode="focus"] {
  --default-divider: rgb(54,227,189); /* @kind color */
  --default-surface: rgb(13,13,13); /* @kind color */
  --default-text: rgb(255,255,255); /* @kind color */
  --impact-default-text: rgb(255,255,255); /* @kind color */
  --impact-inverted-text: rgb(13,13,13); /* @kind color */
  --inverted-divider: rgb(54,227,189); /* @kind color */
  --inverted-surface: rgb(255,255,255); /* @kind color */
  --inverted-text: rgb(13,13,13); /* @kind color */
  --thehealthdividend-default-text: rgb(255,255,255); /* @kind color */
}

:root[data-mode="disable"] {
  --default-divider: rgb(217,217,217); /* @kind color */
  --default-surface: rgb(217,217,217); /* @kind color */
  --default-text: rgb(255,255,255); /* @kind color */
  --impact-default-text: rgb(255,255,255); /* @kind color */
  --impact-inverted-text: rgb(179,179,179); /* @kind color */
  --inverted-divider: rgb(217,217,217); /* @kind color */
  --inverted-surface: rgb(217,217,217); /* @kind color */
  --inverted-text: rgb(179,179,179); /* @kind color */
  --thehealthdividend-default-text: rgb(255,255,255); /* @kind color */
}

:root[data-mode="rounded"] {
  --default-corner-radius: 100;
}

:root[data-mode="outline"] {
  --default-corner-radius: 0;
}

:root[data-mode="rounded-outline"] {
  --default-corner-radius: 100;
}

:root[data-mode="the-health-dividend"] {
  --actions-default-text-2: var(--thehealthdividend-default-text); /* @kind color */
  --actions-inverted-text-2: var(--inverted-text); /* @kind color */
  --background-primary-4: rgb(255,255,255); /* @kind color */
  --divider-secondary: rgb(29,201,164); /* @kind color */
  --surface-inverted-2: rgb(13,13,13); /* @kind color */
  --surface-secondary: rgb(29,201,164); /* @kind color */
  --text-inverted-3: rgb(255,255,255); /* @kind color */
  --text-inverted: rgb(255,255,255); /* @kind color */
  --text-primary-3: rgb(20,31,82); /* @kind color */
  --text-primary-5: rgb(20,31,82); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --colour-base-chicago-45: rgb(29,201,164); /* @kind color */
  --colour-greyscale-london-20: rgb(217,217,217); /* @kind color */
  --colour-greyscale-london-40: rgb(102,102,102); /* @kind color */
}