:root,
:host {
  /* primitives */
  --colour-black: #000000;
  --colour-amber-1: #fffbeb;
  --colour-amber-2: #fef3c7;
  --colour-amber-3: #fde68a;
  --colour-amber-4: #fcd34d;
  --colour-amber-5: #fbbf24;
  --colour-amber-6: #f59e0b;
  --colour-amber-7: #d97706;
  --colour-amber-8: #b45309;
  --colour-amber-9: #92400e;
  --colour-amber-10: #78350f;
  --colour-amber-11: #451a03;
  --colour-amber-12: #361402;
  --colour-green-1: #f7fdf6;
  --colour-green-2: #e6fae5;
  --colour-green-3: #c2f2c3;
  --colour-green-4: #91e794;
  --colour-green-5: #5edc62;
  --colour-green-6: #2dd232;
  --colour-green-7: #00c807;
  --colour-green-8: #05aa06;
  --colour-green-9: #008e02;
  --colour-green-10: #007203;
  --colour-green-11: #015a02;
  --colour-green-12: #014702;
  --colour-grey-dark-1: #111111;
  --colour-grey-dark-2: #191919;
  --colour-grey-dark-3: #222222;
  --colour-grey-dark-4: #2a2a2a;
  --colour-grey-dark-5: #313131;
  --colour-grey-dark-6: #3a3a3a;
  --colour-grey-dark-7: #484848;
  --colour-grey-dark-8: #606060;
  --colour-grey-dark-9: #6e6e6e;
  --colour-grey-dark-10: #7b7b7b;
  --colour-grey-dark-11: #b4b4b4;
  --colour-grey-dark-12: #eeeeee;
  --colour-grey-light-1: #fcfcfc;
  --colour-grey-light-2: #f9f9f9;
  --colour-grey-light-3: #f0f0f0;
  --colour-grey-light-4: #e8e8e8;
  --colour-grey-light-5: #e0e0e0;
  --colour-grey-light-6: #d9d9d9;
  --colour-grey-light-7: #cecece;
  --colour-grey-light-8: #bbbbbb;
  --colour-grey-light-9: #8d8d8d;
  --colour-grey-light-10: #838383;
  --colour-grey-light-11: #646464;
  --colour-grey-light-12: #202020;
  --colour-red-1: #fef2f2;
  --colour-red-2: #fee2e2;
  --colour-red-3: #fecaca;
  --colour-red-4: #fca5a5;
  --colour-red-5: #f87171;
  --colour-red-6: #ef4444;
  --colour-red-7: #dc2626;
  --colour-red-8: #b91c1c;
  --colour-red-9: #991b1b;
  --colour-red-10: #7f1d1d;
  --colour-red-11: #450a0a;
  --colour-red-12: #350808;
  --colour-white: #ffffff;
  --colour-dark-alpha-0: rgba(0, 0, 0, 0);
  --colour-dark-alpha-1: rgba(0, 0, 0, 0.1);
  --colour-dark-alpha-2: rgba(0, 0, 0, 0.2);
  --colour-dark-alpha-3: rgba(0, 0, 0, 0.3);
  --colour-dark-alpha-4: rgba(0, 0, 0, 0.4);
  --colour-dark-alpha-5: rgba(0, 0, 0, 0.5);
  --colour-dark-alpha-6: rgba(0, 0, 0, 0.6);
  --colour-dark-alpha-7: rgba(0, 0, 0, 0.7);
  --colour-dark-alpha-8: rgba(0, 0, 0, 0.8);
  --colour-dark-alpha-9: rgba(0, 0, 0, 0.9);
  --colour-light-alpha-0: rgba(232, 232, 232, 0);
  --colour-light-alpha-1: rgba(232, 232, 232, 0.1);
  --colour-light-alpha-2: rgba(232, 232, 232, 0.2);
  --colour-light-alpha-3: rgba(232, 232, 232, 0.3);
  --colour-light-alpha-4: rgba(232, 232, 232, 0.4);
  --colour-light-alpha-5: rgba(232, 232, 232, 0.5);
  --colour-light-alpha-6: rgba(232, 232, 232, 0.6);
  --colour-light-alpha-7: rgba(232, 232, 232, 0.7);
  --colour-light-alpha-8: rgba(232, 232, 232, 0.8);
  --colour-light-alpha-9: rgba(232, 232, 232, 0.9);
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  --typography-font-family-sans: Inter;
  --typography-font-family-serif: Georgia;
  --typography-font-family-mono: 'Fira Code';
  --typography-font-size-xxs: 10px;
  --typography-font-size-xs: 12px;
  --typography-font-size-sm: 14px;
  --typography-font-size-base: 16px;
  --typography-font-size-lg: 18px;
  --typography-font-size-xl: 20px;
  --typography-font-size-2xl: 24px;
  --typography-font-size-3xl: 30px;
  --typography-font-size-4xl: 36px;
  --typography-font-size-5xl: 40px;
  --typography-font-size-6xl: 48px;
  --typography-font-size-7xl: 60px;
  --typography-font-size-8xl: 72px;
  --typography-font-size-9xl: 96px;
  --typography-font-weight-thin: 100;
  --typography-font-weight-extralight: 200;
  --typography-font-weight-light: 300;
  --typography-font-weight-normal: 400;
  --typography-font-weight-medium: 500;
  --typography-font-weight-semibold: 600;
  --typography-font-weight-bold: 700;
  --typography-font-weight-extrabold: 800;
  --typography-font-weight-black: 900;
  --typography-line-height-3: 12px;
  --typography-line-height-4: 16px;
  --typography-line-height-5: 20px;
  --typography-line-height-6: 24px;
  --typography-line-height-7: 28px;
  --typography-line-height-8: 32px;
  --typography-line-height-9: 36px;
  --typography-line-height-10: 40px;
  --typography-line-height-11: 48px;
  --typography-line-height-none: 1;
  --typography-line-height-tight: 1.25;
  --typography-line-height-snug: 1.375;
  --typography-line-height-normal: 1.5;
  --typography-line-height-relaxed: 1.625;
  --typography-line-height-loose: 2;
  --opacity-0: 0%;
  --opacity-5: 5%;
  --opacity-10: 10%;
  --opacity-15: 15%;
  --opacity-20: 20%;
  --opacity-25: 25%;
  --opacity-30: 30%;
  --opacity-35: 35%;
  --opacity-40: 40%;
  --opacity-45: 45%;
  --opacity-50: 50%;
  --opacity-55: 55%;
  --opacity-60: 60%;
  --opacity-65: 65%;
  --opacity-70: 70%;
  --opacity-75: 75%;
  --opacity-80: 80%;
  --opacity-85: 85%;
  --opacity-90: 90%;
  --opacity-95: 95%;
  --opacity-100: 100%;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-full: 9999px;
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-3-5: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-72: 288px;
  --spacing-76: 304px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --icon-size-xs: 12px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 24px;
  --icon-size-2xl: 28px;
  --icon-size-3xl: 32px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --motion-duration-fast: 150ms;
  --motion-easing-standard: ease;

  /* theme: Light */
  --bg-primary: var(--colour-grey-light-2);
  --bg-secondary: var(--colour-grey-light-3);
  --bg-accent-brand: var(--colour-black);
  --bg-positive-primary: var(--colour-green-8);
  --border-primary: var(--colour-grey-light-3);
  --border-secondary: var(--colour-grey-light-4);
  --bg-page: var(--colour-white);
  --fg-positive: var(--colour-green-8);
  --fg-primary: var(--colour-grey-light-12);
  --fg-secondary: var(--colour-grey-light-11);
  --border-positive: var(--colour-green-8);
  --border-accent: var(--colour-black);
  --bg-negative: var(--colour-red-7);
  --border-negative: var(--colour-red-7);
  --fg-negative: var(--colour-red-7);
  --bg-disabled: var(--colour-grey-light-2);
  --fg-disabled: var(--colour-grey-light-8);
  --bg-tertiary: var(--colour-grey-light-4);
  --fg-accent-brand: var(--colour-white);
  --fg-on-dark: var(--colour-white);
  --fg-accent-brand-inverted: var(--colour-black);
  --bg-accent-brand-inverted: var(--colour-white);
  --border-accent-inverted: var(--colour-white);
  --fg-tertiary: var(--colour-grey-light-10);
  --fg-on-light: var(--colour-black);
  --bg-on-dark: var(--colour-white);
  --bg-positive-secondary: var(--colour-green-10);
  --fg-accent-yellow: var(--colour-amber-6);
  --bg-chart-positive: var(--colour-green-8);
  --gradient-primary-start: var(--colour-light-alpha-8);
  --gradient-primary-end: var(--colour-light-alpha-0);
  --bg-on-light: var(--colour-black);
  --bg-chart-negative: var(--colour-red-7);
  --fg-chart-positive: var(--colour-green-8);
  --fg-chart-negative: var(--colour-red-7);
  --fg-quaternary: var(--colour-grey-light-9);
  --fg-accent-green: var(--colour-green-8);
  --bg-accent-green: var(--colour-green-8);
  --focus-ring-colour: var(--colour-black);
  /* hover overlays — theme-aware so they flip polarity in dark mode (see dark block) */
  --bg-primary-hover: var(--colour-dark-alpha-1);
  --bg-secondary-hover: var(--colour-dark-alpha-1);
  --bg-tertiary-hover: var(--colour-dark-alpha-1);
  --bg-accent-brand-hover: var(--colour-light-alpha-2);
  --bg-negative-hover: var(--colour-light-alpha-2);

  /* components */
  --button-accent-background: var(--bg-accent-brand);
  --button-accent-label: var(--fg-accent-brand);
  --button-negative-background: var(--bg-negative);
  --button-negative-label: var(--fg-on-dark);
  --button-primary-background: var(--bg-primary);
  --button-primary-label: var(--fg-primary);
  --button-ghost-label: var(--fg-primary);
  --button-secondary-background: var(--bg-secondary);
  --button-secondary-label: var(--fg-primary);
  --button-tertiary-background: var(--bg-tertiary);
  --button-tertiary-label: var(--fg-primary);
  --button-primary-icon: var(--fg-primary);
  --button-secondary-icon: var(--fg-primary);
  --button-tertiary-icon: var(--fg-primary);
  --button-accent-icon: var(--fg-accent-brand);
  --button-negative-icon: var(--fg-on-dark);
  --button-ghost-icon: var(--fg-primary);
  --button-label-disabled: var(--fg-disabled);
  --button-icon-disabled: var(--fg-disabled);
  --button-background-disabled: var(--bg-disabled);
  --button-primary-background-active: var(--bg-accent-brand);
  --button-primary-label-active: var(--fg-accent-brand);
  --button-primary-icon-active: var(--fg-accent-brand);
  --button-secondary-background-active: var(--bg-accent-brand);
  --button-secondary-label-active: var(--fg-accent-brand);
  --button-secondary-icon-active: var(--fg-accent-brand);
  --button-tertiary-background-active: var(--bg-accent-brand);
  --button-tertiary-label-active: var(--fg-accent-brand);
  --button-tertiary-icon-active: var(--fg-accent-brand);
  --button-accent-background-active: var(--bg-accent-brand-inverted);
  --button-accent-label-active: var(--fg-accent-brand-inverted);
  --button-accent-icon-active: var(--fg-accent-brand-inverted);
  --button-negative-background-active: var(--bg-negative);
  --button-negative-label-active: var(--fg-on-dark);
  --button-negative-icon-active: var(--fg-on-dark);
  --button-ghost-label-active: var(--fg-primary);
  --button-ghost-icon-active: var(--fg-primary);
  --button-primary-background-hover: var(--bg-primary-hover);
  --button-secondary-background-hover: var(--bg-secondary-hover);
  --button-tertiary-background-hover: var(--bg-tertiary-hover);
  --button-ghost-background-hover: var(--bg-primary-hover);
  --button-accent-background-hover: var(--bg-accent-brand-hover);
  --button-negative-background-hover: var(--bg-negative-hover);
  --odds-button-background: var(--bg-tertiary);
  --odds-button-label-primary: var(--fg-primary);
  --odds-button-background-disabled: var(--bg-disabled);
  --odds-button-label-disabled: var(--fg-disabled);
  --odds-button-background-active: var(--bg-accent-brand);
  --odds-button-label-active: var(--fg-accent-brand);
  --odds-button-label-secondary: var(--fg-secondary);
  --odds-button-background-hover: var(--bg-tertiary-hover);
  --pill-button-primary-background: var(--bg-primary);
  --pill-button-primary-label: var(--fg-primary);
  --pill-button-primary-icon: var(--fg-primary);
  --pill-button-secondary-background: var(--bg-secondary);
  --pill-button-secondary-label: var(--fg-primary);
  --pill-button-secondary-icon: var(--fg-primary);
  --pill-button-tertiary-background: var(--bg-tertiary);
  --pill-button-tertiary-label: var(--fg-primary);
  --pill-button-tertiary-icon: var(--fg-primary);
  --pill-button-accent-background: var(--bg-accent-brand);
  --pill-button-accent-label: var(--fg-accent-brand);
  --pill-button-accent-icon: var(--fg-accent-brand);
  --pill-button-negative-background: var(--bg-negative);
  --pill-button-negative-label: var(--fg-on-dark);
  --pill-button-negative-icon: var(--fg-on-dark);
  --pill-button-ghost-label: var(--fg-primary);
  --pill-button-ghost-icon: var(--fg-primary);
  --pill-button-background-disabled: var(--bg-disabled);
  --pill-button-label-disabled: var(--fg-disabled);
  --pill-button-icon-disabled: var(--fg-disabled);
  --pill-button-primary-background-active: var(--bg-accent-brand);
  --pill-button-secondary-background-active: var(--bg-accent-brand);
  --pill-button-tertiary-background-active: var(--bg-accent-brand);
  --pill-button-primary-label-active: var(--fg-accent-brand);
  --pill-button-primary-icon-active: var(--fg-accent-brand);
  --pill-button-secondary-label-active: var(--fg-accent-brand);
  --pill-button-secondary-icon-active: var(--fg-accent-brand);
  --pill-button-tertiary-label-active: var(--fg-accent-brand);
  --pill-button-tertiary-icon-active: var(--fg-accent-brand);
  --pill-button-accent-background-active: var(--bg-accent-brand-inverted);
  --pill-button-accent-label-active: var(--fg-accent-brand-inverted);
  --pill-button-accent-icon-active: var(--fg-accent-brand-inverted);
  --pill-button-negative-background-active: var(--bg-negative);
  --pill-button-negative-label-active: var(--fg-on-dark);
  --pill-button-negative-icon-active: var(--fg-on-dark);
  --pill-button-ghost-label-active: var(--fg-primary);
  --pill-button-ghost-icon-active: var(--fg-primary);
  --pill-button-primary-background-hover: var(--bg-primary-hover);
  --pill-button-secondary-background-hover: var(--bg-secondary-hover);
  --pill-button-tertiary-background-hover: var(--bg-tertiary-hover);
  --pill-button-ghost-background-hover: var(--bg-primary-hover);
  --pill-button-accent-background-hover: var(--bg-accent-brand-hover);
  --pill-button-negative-background-hover: var(--bg-negative-hover);
  --event-header-background: var(--bg-tertiary);
  --event-header-label: var(--fg-primary);
  --circle-button-primary-background: var(--bg-primary);
  --circle-button-primary-icon: var(--fg-primary);
  --circle-button-background-disabled: var(--bg-disabled);
  --circle-button-icon-disabled: var(--fg-disabled);
  --circle-button-secondary-background: var(--bg-secondary);
  --circle-button-secondary-icon: var(--fg-primary);
  --circle-button-tertiary-background: var(--bg-tertiary);
  --circle-button-tertiary-icon: var(--fg-primary);
  --circle-button-accent-background: var(--bg-accent-brand);
  --circle-button-accent-icon: var(--fg-accent-brand);
  --circle-button-negative-background: var(--bg-negative);
  --circle-button-negative-icon: var(--fg-on-dark);
  --circle-button-ghost-icon: var(--fg-primary);
  --circle-button-primary-background-hover: var(--bg-primary-hover);
  --circle-button-secondary-background-hover: var(--bg-secondary-hover);
  --circle-button-tertiary-background-hover: var(--bg-tertiary-hover);
  --circle-button-ghost-background-hover: var(--bg-primary-hover);
  --circle-button-accent-background-hover: var(--bg-accent-brand-hover);
  --circle-button-negative-background-hover: var(--bg-negative-hover);
  --circle-button-primary-background-active: var(--bg-accent-brand);
  --circle-button-primary-icon-active: var(--fg-accent-brand);
  --circle-button-secondary-background-active: var(--bg-accent-brand);
  --circle-button-secondary-icon-active: var(--fg-accent-brand);
  --circle-button-tertiary-background-active: var(--bg-accent-brand);
  --circle-button-tertiary-icon-active: var(--fg-accent-brand);
  --circle-button-accent-background-active: var(--bg-accent-brand-inverted);
  --circle-button-accent-icon-active: var(--fg-accent-brand-inverted);
  --circle-button-negative-background-active: var(--bg-negative);
  --circle-button-negative-icon-active: var(--fg-on-dark);
  --circle-button-ghost-icon-active: var(--fg-primary);
  --link-button-primary-label: var(--fg-primary);
  --link-button-primary-icon: var(--fg-primary);
  --link-button-secondary-label: var(--fg-secondary);
  --link-button-secondary-icon: var(--fg-secondary);
  --link-button-tertiary-label: var(--fg-tertiary);
  --link-button-tertiary-icon: var(--fg-tertiary);
  --link-button-accent-label: var(--fg-accent-brand-inverted);
  --link-button-accent-icon: var(--fg-accent-brand-inverted);
  --link-button-negative-label: var(--fg-negative);
  --link-button-negative-icon: var(--fg-negative);
  --link-button-label-disabled: var(--fg-disabled);
  --link-button-icon-disabled: var(--fg-disabled);
  --section-header-background: var(--bg-secondary);
  --section-header-label: var(--fg-secondary);
  --section-header-gradient-start: var(--gradient-primary-start);
  --section-header-gradient-end: var(--gradient-primary-end);
  --event-row-background: var(--bg-primary);
  --event-row-label: var(--fg-primary);
  --event-row-divider: var(--border-primary);
  --match-card-background: var(--bg-primary);
  --match-card-label-primary: var(--fg-primary);
  --match-card-label-secondary: var(--fg-secondary);
  --trend-card-label-primary: var(--fg-primary);
  --trend-card-label-positive: var(--fg-accent-green);
  --trend-icon-background: var(--bg-accent-green);
  --trend-icon-icon: var(--fg-on-dark);
  --trend-category-label-secondary: var(--fg-primary);
  --trend-category-label-primary: var(--fg-accent-green);
  --event-hero-label-primary: var(--fg-primary);
  --event-hero-label-secondary: var(--fg-secondary);
  --market-card-background: var(--bg-primary);
  --market-card-border: var(--border-primary);
  --market-row-label-primary: var(--fg-primary);
  --market-row-label-secondary: var(--fg-secondary);
  --market-row-icon: var(--fg-primary);
  --market-row-background: var(--bg-primary);
  --market-row-border: var(--border-primary);
  --market-row-gradient-start: var(--gradient-primary-start);
  --market-row-gradient-end: var(--gradient-primary-end);
  --event-footer-background: var(--bg-primary);
  --event-footer-label: var(--fg-primary);
  --fav-button-icon-primary: var(--fg-quaternary);
  --fav-button-icon-hover: var(--fg-tertiary);
  --fav-button-icon-active: var(--fg-accent-yellow);
  --fav-button-icon-disabled: var(--fg-disabled);
  --stats-button-icon-primary: var(--fg-quaternary);
  --stats-button-icon-hover: var(--fg-tertiary);
  --stats-button-icon-active: var(--fg-accent-green);
  --stats-button-icon-disabled: var(--fg-disabled);
  --scanner-card-background: var(--bg-primary);
  --feature-row-label: var(--fg-primary);
  --feature-row-icon: var(--fg-primary);
  --form-chart-positive: var(--bg-chart-positive);
  --form-chart-on-positive: var(--fg-on-dark);
  --form-chart-positive-axis: var(--fg-chart-positive);
  --form-chart-negative: var(--bg-tertiary);
  --form-chart-on-negative: var(--fg-secondary);
  --form-chart-negative-axis: var(--fg-secondary);
  --decrement-button-icon-primary: var(--fg-primary);
  --decrement-button-icon-hover: var(--fg-secondary);
  --decrement-button-icon-disabled: var(--fg-disabled);
  --increment-button-icon-primary: var(--fg-primary);
  --increment-button-icon-hover: var(--fg-secondary);
  --increment-button-icon-disabled: var(--fg-disabled);
  --number-stepper-background: var(--bg-primary);
  --number-stepper-value: var(--fg-primary);

  /* text styles */
  --text-style-heading-xl-font-family: Inter;
  --text-style-heading-xl-font-weight: 700;
  --text-style-heading-xl-font-size: 30px;
  --text-style-heading-xl-line-height: 48px;
  --text-style-heading-xl-letter-spacing: 0;
  --text-style-heading-lg-font-family: Inter;
  --text-style-heading-lg-font-weight: 700;
  --text-style-heading-lg-font-size: 24px;
  --text-style-heading-lg-line-height: 40px;
  --text-style-heading-lg-letter-spacing: 0;
  --text-style-heading-md-font-family: Inter;
  --text-style-heading-md-font-weight: 700;
  --text-style-heading-md-font-size: 20px;
  --text-style-heading-md-line-height: 32px;
  --text-style-heading-md-letter-spacing: 0;
  --text-style-heading-sm-font-family: Inter;
  --text-style-heading-sm-font-weight: 700;
  --text-style-heading-sm-font-size: 18px;
  --text-style-heading-sm-line-height: 28px;
  --text-style-heading-sm-letter-spacing: 0;
  --text-style-title-lg-font-family: Inter;
  --text-style-title-lg-font-weight: 700;
  --text-style-title-lg-font-size: 16px;
  --text-style-title-lg-line-height: 24px;
  --text-style-title-lg-letter-spacing: 0;
  --text-style-title-md-font-family: Inter;
  --text-style-title-md-font-weight: 700;
  --text-style-title-md-font-size: 14px;
  --text-style-title-md-line-height: 20px;
  --text-style-title-md-letter-spacing: 0;
  --text-style-title-sm-font-family: Inter;
  --text-style-title-sm-font-weight: 700;
  --text-style-title-sm-font-size: 12px;
  --text-style-title-sm-line-height: 16px;
  --text-style-title-sm-letter-spacing: 0;
  --text-style-title-xs-font-family: Inter;
  --text-style-title-xs-font-weight: 700;
  --text-style-title-xs-font-size: 10px;
  --text-style-title-xs-line-height: 12px;
  --text-style-title-xs-letter-spacing: 0;
  --text-style-body-xl-font-family: Inter;
  --text-style-body-xl-font-weight: 500;
  --text-style-body-xl-font-size: 18px;
  --text-style-body-xl-line-height: 28px;
  --text-style-body-xl-letter-spacing: 0;
  --text-style-body-lg-font-family: Inter;
  --text-style-body-lg-font-weight: 500;
  --text-style-body-lg-font-size: 16px;
  --text-style-body-lg-line-height: 24px;
  --text-style-body-lg-letter-spacing: 0;
  --text-style-body-md-font-family: Inter;
  --text-style-body-md-font-weight: 500;
  --text-style-body-md-font-size: 14px;
  --text-style-body-md-line-height: 20px;
  --text-style-body-md-letter-spacing: 0;
  --text-style-body-sm-font-family: Inter;
  --text-style-body-sm-font-weight: 500;
  --text-style-body-sm-font-size: 12px;
  --text-style-body-sm-line-height: 16px;
  --text-style-body-sm-letter-spacing: 0;
  --text-style-body-xs-font-family: Inter;
  --text-style-body-xs-font-weight: 500;
  --text-style-body-xs-font-size: 10px;
  --text-style-body-xs-line-height: 12px;
  --text-style-body-xs-letter-spacing: 0;
}

:root[data-theme='dark'],
:host([data-theme='dark']) {
  /* theme: Dark */
  --bg-primary: var(--colour-grey-dark-1);
  --bg-secondary: var(--colour-grey-dark-2);
  --bg-accent-brand: var(--colour-white);
  --bg-positive-primary: var(--colour-green-7);
  --border-primary: var(--colour-grey-dark-2);
  --border-secondary: var(--colour-grey-dark-3);
  --bg-page: var(--colour-black);
  --fg-positive: var(--colour-green-7);
  --fg-primary: var(--colour-grey-dark-12);
  --fg-secondary: var(--colour-grey-dark-11);
  --border-positive: var(--colour-green-7);
  --border-accent: var(--colour-white);
  --bg-negative: var(--colour-red-7);
  --border-negative: var(--colour-red-7);
  --fg-negative: var(--colour-red-7);
  --bg-disabled: var(--colour-grey-dark-1);
  --fg-disabled: var(--colour-grey-dark-8);
  --bg-tertiary: var(--colour-grey-dark-3);
  --fg-accent-brand: var(--colour-black);
  --fg-on-dark: var(--colour-white);
  --fg-accent-brand-inverted: var(--colour-white);
  --bg-accent-brand-inverted: var(--colour-black);
  --border-accent-inverted: var(--colour-black);
  --fg-tertiary: var(--colour-grey-dark-10);
  --fg-on-light: var(--colour-black);
  --bg-on-dark: var(--colour-white);
  --bg-positive-secondary: var(--colour-green-9);
  --fg-accent-yellow: var(--colour-amber-6);
  --bg-chart-positive: var(--colour-green-7);
  --gradient-primary-start: var(--colour-dark-alpha-8);
  --gradient-primary-end: var(--colour-dark-alpha-0);
  --bg-on-light: var(--colour-black);
  --bg-chart-negative: var(--colour-red-7);
  --fg-chart-positive: var(--colour-green-7);
  --fg-chart-negative: var(--colour-red-7);
  --fg-quaternary: var(--colour-grey-dark-10);
  --fg-accent-green: var(--colour-green-7);
  --bg-accent-green: var(--colour-green-7);
  --focus-ring-colour: var(--colour-white);
  /* hover overlays flip polarity: light overlay on dark surfaces; accent surface inverts to white, so it darkens */
  --bg-primary-hover: var(--colour-light-alpha-1);
  --bg-secondary-hover: var(--colour-light-alpha-1);
  --bg-tertiary-hover: var(--colour-light-alpha-1);
  --bg-accent-brand-hover: var(--colour-dark-alpha-1);
  /* negative resolves to the same overlay in both themes (red surface stays dark), but set explicitly so a future dark-mode change has a home */
  --bg-negative-hover: var(--colour-light-alpha-2);

}