/* Mafynetti design system -tokenit AIAI:lle.
   Generoitu Luongin design systemin tokens.json-tiedostosta
   (lähde mafydev/mafynetti master@22e86b980d, synkattu 2026-10-07).
   Älä muokkaa arvoja käsin: päivitä lähteestä ja generoi uudelleen. */

:root {

  /* primary */
  --mf-primary-0: #ffffff;
  --mf-primary-50: #e0efff;
  --mf-primary-100: #bddcff;
  --mf-primary-200: #80bbff;
  --mf-primary-300: #3d98ff;
  --mf-primary-400: #0077ff;
  --mf-primary-500: #0058bd;
  --mf-primary-600: #003b7e;
  --mf-primary-700: #002d61;
  --mf-primary-800: #001d3d;
  --mf-primary-900: #000e1f;
  --mf-primary-1000: #000000;

  /* secondary */
  --mf-secondary-0: #ffffff;
  --mf-secondary-50: #e3fafd;
  --mf-secondary-100: #cbf5fa;
  --mf-secondary-200: #93eaf6;
  --mf-secondary-300: #60e0f1;
  --mf-secondary-400: #2cd6ed;
  --mf-secondary-500: #12b8cd;
  --mf-secondary-600: #0e93a4;
  --mf-secondary-700: #0b6d7a;
  --mf-secondary-800: #074750;
  --mf-secondary-900: #04262a;
  --mf-secondary-1000: #000000;

  /* info */
  --mf-info-0: #ffffff;
  --mf-info-50: #d8eef8;
  --mf-info-100: #c2e4f4;
  --mf-info-200: #9cd3ed;
  --mf-info-300: #75c2e6;
  --mf-info-400: #4eb1df;
  --mf-info-500: #27a0d8;
  --mf-info-600: #2083b1;
  --mf-info-700: #19668a;
  --mf-info-800: #124a63;
  --mf-info-900: #0b2d3d;
  --mf-info-1000: #000000;

  /* danger */
  --mf-danger-0: #ffffff;
  --mf-danger-50: #fce8ec;
  --mf-danger-100: #f9d2da;
  --mf-danger-200: #f4a9b8;
  --mf-danger-300: #ee7c93;
  --mf-danger-400: #e84f6d;
  --mf-danger-500: #e3254a;
  --mf-danger-600: #b91838;
  --mf-danger-700: #8c122a;
  --mf-danger-800: #5f0c1d;
  --mf-danger-900: #2d060e;
  --mf-danger-1000: #000000;

  /* warning */
  --mf-warning-0: #ffffff;
  --mf-warning-50: #fff1e5;
  --mf-warning-100: #ffe0c7;
  --mf-warning-200: #ffc494;
  --mf-warning-300: #ffa55c;
  --mf-warning-400: #ff8929;
  --mf-warning-500: #f16e00;
  --mf-warning-600: #c25700;
  --mf-warning-700: #8f4000;
  --mf-warning-800: #612c00;
  --mf-warning-900: #2e1500;
  --mf-warning-1000: #000000;

  /* success */
  --mf-success-0: #ffffff;
  --mf-success-50: #e5f7ed;
  --mf-success-100: #cdf4e2;
  --mf-success-200: #9be9c4;
  --mf-success-300: #69dda7;
  --mf-success-400: #37d28a;
  --mf-success-500: #26a96c;
  --mf-success-600: #1e8555;
  --mf-success-700: #166440;
  --mf-success-800: #0f432b;
  --mf-success-900: #051a0f;
  --mf-success-1000: #000000;

  /* neutral */
  --mf-neutral-0: #ffffff;
  --mf-neutral-50: #fafafa;
  --mf-neutral-100: #f5f5f5;
  --mf-neutral-200: #eeeeee;
  --mf-neutral-300: #e0e0e0;
  --mf-neutral-400: #bdbdbd;
  --mf-neutral-500: #9e9e9e;
  --mf-neutral-600: #757575;
  --mf-neutral-700: #616161;
  --mf-neutral-800: #424242;
  --mf-neutral-900: #212121;
  --mf-neutral-1000: #000000;

  /* primary */
  --mf-primary-main: var(--mf-primary-500);
  --mf-primary-light: var(--mf-primary-400);
  --mf-primary-dark: var(--mf-primary-600);
  --mf-primary-contrast-text: var(--mf-primary-0);
  --mf-primary-text: var(--mf-primary-500);
  --mf-primary-text-contrasting: var(--mf-primary-0);
  --mf-primary-surface: var(--mf-primary-200);
  --mf-primary-surface-contrasting: var(--mf-primary-800);
  --mf-primary-surface-faint: #f3f9ff;
  --mf-primary-surface-faint-contrasting: var(--mf-primary-900);
  --mf-primary-stroke: var(--mf-primary-500);
  --mf-primary-stroke-contrasting: var(--mf-primary-0);
  --mf-primary-icon: var(--mf-primary-500);
  --mf-primary-icon-contrasting: var(--mf-primary-0);

  /* secondary */
  --mf-secondary-main: #27bacd;
  --mf-secondary-light: #e0fafd;
  --mf-secondary-dark: rgb(27, 130, 143);
  --mf-secondary-contrast-text: rgba(0, 0, 0, 0.87);
  --mf-secondary-text: #27bacd;
  --mf-secondary-text-contrasting: rgba(0, 0, 0, 0.87);
  --mf-secondary-surface: var(--mf-secondary-200);
  --mf-secondary-surface-contrasting: var(--mf-secondary-800);
  --mf-secondary-surface-faint: var(--mf-secondary-100);
  --mf-secondary-surface-faint-contrasting: var(--mf-secondary-900);
  --mf-secondary-stroke: #27bacd;
  --mf-secondary-stroke-contrasting: rgba(0, 0, 0, 0.87);
  --mf-secondary-icon: #27bacd;
  --mf-secondary-icon-contrasting: rgba(0, 0, 0, 0.87);

  /* info */
  --mf-info-main: #2196f3;
  --mf-info-light: #64b5f6;
  --mf-info-dark: #1976d2;
  --mf-info-contrast-text: var(--mf-info-0);
  --mf-info-text: #2196f3;
  --mf-info-text-contrasting: var(--mf-info-0);
  --mf-info-surface: var(--mf-info-200);
  --mf-info-surface-contrasting: var(--mf-info-800);
  --mf-info-surface-faint: var(--mf-info-100);
  --mf-info-surface-faint-contrasting: var(--mf-info-900);
  --mf-info-stroke: #2196f3;
  --mf-info-stroke-contrasting: var(--mf-info-0);
  --mf-info-icon: #2196f3;
  --mf-info-icon-contrasting: var(--mf-info-0);

  /* danger */
  --mf-danger-main: #f44336;
  --mf-danger-light: #e57373;
  --mf-danger-dark: #d32f2f;
  --mf-danger-contrast-text: var(--mf-danger-0);
  --mf-danger-text: #f44336;
  --mf-danger-text-contrasting: var(--mf-danger-0);
  --mf-danger-surface: var(--mf-danger-200);
  --mf-danger-surface-contrasting: var(--mf-danger-800);
  --mf-danger-surface-faint: var(--mf-danger-100);
  --mf-danger-surface-faint-contrasting: var(--mf-danger-900);
  --mf-danger-stroke: #f44336;
  --mf-danger-stroke-contrasting: var(--mf-danger-0);
  --mf-danger-icon: #f44336;
  --mf-danger-icon-contrasting: var(--mf-danger-0);

  /* warning */
  --mf-warning-main: #ff9800;
  --mf-warning-light: #ffb74d;
  --mf-warning-dark: #f57c00;
  --mf-warning-contrast-text: rgba(0, 0, 0, 0.87);
  --mf-warning-text: #ff9800;
  --mf-warning-text-contrasting: rgba(0, 0, 0, 0.87);
  --mf-warning-surface: var(--mf-warning-200);
  --mf-warning-surface-contrasting: var(--mf-warning-800);
  --mf-warning-surface-faint: var(--mf-warning-100);
  --mf-warning-surface-faint-contrasting: var(--mf-warning-900);
  --mf-warning-stroke: #ff9800;
  --mf-warning-stroke-contrasting: rgba(0, 0, 0, 0.87);
  --mf-warning-icon: #ff9800;
  --mf-warning-icon-contrasting: rgba(0, 0, 0, 0.87);

  /* success */
  --mf-success-main: #4caf50;
  --mf-success-light: #81c784;
  --mf-success-dark: #388e3c;
  --mf-success-contrast-text: rgba(0, 0, 0, 0.87);
  --mf-success-text: #4caf50;
  --mf-success-text-contrasting: rgba(0, 0, 0, 0.87);
  --mf-success-surface: #daf7e9;
  --mf-success-surface-contrasting: var(--mf-success-800);
  --mf-success-surface-faint: var(--mf-success-100);
  --mf-success-surface-faint-contrasting: var(--mf-success-900);
  --mf-success-stroke: #10b96a;
  --mf-success-stroke-contrasting: rgba(0, 0, 0, 0.87);
  --mf-success-icon: #4caf50;
  --mf-success-icon-contrasting: rgba(0, 0, 0, 0.87);

  /* neutral */
  --mf-neutral-main: var(--mf-neutral-500);
  --mf-neutral-light: var(--mf-neutral-200);
  --mf-neutral-dark: var(--mf-neutral-800);
  --mf-neutral-contrast-text: var(--mf-neutral-1000);
  --mf-neutral-text: var(--mf-neutral-500);
  --mf-neutral-text-contrasting: var(--mf-neutral-1000);
  --mf-neutral-surface: var(--mf-neutral-200);
  --mf-neutral-surface-contrasting: var(--mf-neutral-900);
  --mf-neutral-surface-faint: var(--mf-neutral-100);
  --mf-neutral-surface-faint-contrasting: var(--mf-neutral-900);
  --mf-neutral-stroke: var(--mf-neutral-500);
  --mf-neutral-stroke-contrasting: var(--mf-neutral-1000);
  --mf-neutral-icon: var(--mf-neutral-500);
  --mf-neutral-icon-contrasting: var(--mf-neutral-1000);

  /* accent */
  --mf-accent-0-main: #0077ff;
  --mf-accent-0-light: #99c9ff;
  --mf-accent-0-dark: #003b7e;
  --mf-accent-0-contrast-text: #ffffff;
  --mf-accent-1-main: #ffc107;
  --mf-accent-1-light: #ffe69c;
  --mf-accent-1-dark: #997000;
  --mf-accent-1-contrast-text: #ffffff;
  --mf-accent-2-main: #9c27b0;
  --mf-accent-2-light: #ab47bc;
  --mf-accent-2-dark: #8e24aa;
  --mf-accent-2-contrast-text: #ffffff;
  --mf-accent-3-main: #e857ff;
  --mf-accent-3-light: #fdebff;
  --mf-accent-3-dark: #b000b5;
  --mf-accent-3-contrast-text: #ffffff;
  --mf-accent-4-main: #2b2bff;
  --mf-accent-4-light: #42a5f5;
  --mf-accent-4-dark: #0d47a1;
  --mf-accent-4-contrast-text: #ffffff;

  /* background */
  --mf-background-default: #f7f7fa;
  --mf-background-paper: #fff;

  /* text */
  --mf-text-primary: rgba(0, 0, 0, 0.87);
  --mf-text-secondary: rgba(0, 0, 0, 0.6);
  --mf-text-disabled: rgba(0, 0, 0, 0.38);

  /* divider */
  --mf-divider: rgba(0, 0, 0, 0.12);

  /* action */
  --mf-action-active: rgba(0, 0, 0, 0.54);
  --mf-action-hover: rgba(0, 0, 0, 0.04);
  --mf-action-selected: rgba(0, 0, 0, 0.08);
  --mf-action-focus: rgba(0, 0, 0, 0.12);
  --mf-action-disabled: rgba(0, 0, 0, 0.26);
  --mf-action-disabled-background: rgba(0, 0, 0, 0.12);

  /* common */
  --mf-common-white: #fff;
  --mf-common-black: #000;

  /* legacy */
  --mf-legacy-text-primary: #051745;
  --mf-legacy-text-primary-faded: rgba(5, 23, 69, 0.8);
  --mf-legacy-text-primary-subtle: #234472;
  --mf-legacy-text-primary-subdued: #002d61;
  --mf-legacy-ds-text-primary: #002d61de;
  --mf-legacy-ds-text-secondary: #002d61cc;
  --mf-legacy-ds-action-hover: #546e7a14;
  --mf-legacy-ds-action-selected: #546e7a29;
  --mf-legacy-ds-action-disabled: #546e7a61;
  --mf-legacy-background-default-light: #f5f7f9;
  --mf-legacy-background-default-strong: #eeeef5;
  --mf-legacy-outside-background: #f8f9fa;
  --mf-legacy-header-main: #f7f7f7;
  --mf-legacy-header-border: #dfdfdf;
  --mf-legacy-chapter-main: #ebeef3;
  --mf-legacy-primary-light: #dae6f3;
  --mf-legacy-section-border: #dad6ec;
  --mf-legacy-section-disabled: #eef1f5;
  --mf-legacy-outline-weak: rgba(0, 0, 0, 0.12);
  --mf-legacy-outline-default: rgba(0, 0, 0, 0.32);
  --mf-legacy-faint-backdrop-overlay: rgba(0, 0, 0, 0.04);
  --mf-legacy-intro-test-header: #0077ff;
  --mf-legacy-intro-learn-header: #ffca28;
  --mf-legacy-intro-practice-header: #9c27b0;
  --mf-legacy-alt-primary: #1450e6;
  --mf-legacy-alt-primary-dark: #103fb7;
  --mf-legacy-alt-primary-inverse: #08205e;
  --mf-legacy-banner-info: #d5dffb;
  --mf-legacy-banner-danger: #fadce2;
  --mf-legacy-banner-warning: #ffe7d4;
  --mf-legacy-banner-success: #dbfae9;
  --mf-legacy-banner-text-info: #0f349a;
  --mf-legacy-banner-text-danger: #8d112a;
  --mf-legacy-banner-text-warning: #c25700;
  --mf-legacy-banner-text-success: #118d3a;

  /* Typografia */
  --mf-font-sans: Poppins, "Open Sans", sans-serif;
  --mf-font-h1: 300 6rem/1.167 var(--mf-font-sans);
  --mf-font-h2: 300 3.75rem/1.2 var(--mf-font-sans);
  --mf-font-h3: 400 3rem/1.167 var(--mf-font-sans);
  --mf-font-h4: 400 2.125rem/1.235 var(--mf-font-sans);
  --mf-font-h5: 400 1.5rem/1.334 var(--mf-font-sans);
  --mf-font-h6: 500 1.25rem/1.6 var(--mf-font-sans);
  --mf-font-subtitle1: 400 1rem/1.75 var(--mf-font-sans);
  --mf-font-subtitle2: 500 0.875rem/1.57 var(--mf-font-sans);
  --mf-font-body1: 400 1rem/1.5 var(--mf-font-sans);
  --mf-font-body2: 400 0.875rem/1.43 var(--mf-font-sans);
  --mf-font-caption: 400 0.75rem/1.66 var(--mf-font-sans);
  --mf-font-button: 500 0.875rem/1.75 var(--mf-font-sans);
  --mf-font-overline: 400 0.75rem/2.66 var(--mf-font-sans);

  /* spacing */
  --mf-space-0-5: 4px;
  --mf-space-1: 8px;
  --mf-space-1-5: 12px;
  --mf-space-2: 16px;
  --mf-space-3: 24px;
  --mf-space-4: 32px;
  --mf-space-5: 40px;
  --mf-space-6: 48px;
  --mf-space-8: 64px;
  --mf-space-10: 80px;

  /* radius */
  --mf-radius-default: 4px;
  --mf-radius-large: 8px;
  --mf-radius-dialog: 16px;
  --mf-radius-pill: 9999px;

  /* shadow */
  --mf-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mf-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mf-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mf-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mf-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mf-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mf-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mf-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mf-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

  /* zIndex */
  --mf-z-mobile-stepper: 1000;
  --mf-z-fab: 1050;
  --mf-z-speed-dial: 1050;
  --mf-z-app-bar: 1100;
  --mf-z-drawer: 1200;
  --mf-z-modal: 1300;
  --mf-z-snackbar: 1400;
  --mf-z-tooltip: 1500;

  /* breakpoint: vain JS:n luettavaksi, @media ei lue muuttujia */
  --mf-breakpoint-xs: 0px;
  --mf-breakpoint-sm: 600px;
  --mf-breakpoint-md: 960px;
  --mf-breakpoint-lg: 1280px;
  --mf-breakpoint-xl: 1920px;

  /* Liike (MUI:n oletukset README:n mukaan) */
  --mf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mf-duration-short: 150ms;
  --mf-duration-long: 375ms;
}

/* Tumma teema: vain arvot, jotka eroavat vaaleasta. Aliakset (var(...)) seuraavat automaattisesti. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --mf-primary-0: #161616;
  --mf-primary-50: #002348;
  --mf-primary-100: #003168;
  --mf-primary-200: #004aa0;
  --mf-primary-300: #0068dd;
  --mf-primary-400: #1683ff;
  --mf-primary-500: #52a3ff;
  --mf-primary-600: #8cc2ff;
  --mf-primary-700: #a6cfff;
  --mf-primary-800: #c7e2ff;
  --mf-primary-900: #e3efff;
  --mf-primary-1000: #ffffff;
  --mf-secondary-0: #161616;
  --mf-secondary-50: #053b42;
  --mf-secondary-100: #084f57;
  --mf-secondary-200: #0c7b8b;
  --mf-secondary-300: #10a6b9;
  --mf-secondary-400: #14d0e9;
  --mf-secondary-500: #43dbef;
  --mf-secondary-600: #69e3f2;
  --mf-secondary-700: #8fe9f5;
  --mf-secondary-800: #b6f0f9;
  --mf-secondary-900: #d9f8fb;
  --mf-secondary-1000: #ffffff;
  --mf-info-0: #161616;
  --mf-info-50: #0d3648;
  --mf-info-100: #11445d;
  --mf-info-200: #175e7f;
  --mf-info-300: #1e78a3;
  --mf-info-400: #2493c7;
  --mf-info-500: #39a8db;
  --mf-info-600: #5db8e2;
  --mf-info-700: #81c7e8;
  --mf-info-800: #a4d8ef;
  --mf-info-900: #c7e6f5;
  --mf-info-1000: #ffffff;
  --mf-danger-0: #161616;
  --mf-danger-50: #3b0812;
  --mf-danger-100: #4f0b19;
  --mf-danger-200: #750f23;
  --mf-danger-300: #9e1530;
  --mf-danger-400: #c71a3c;
  --mf-danger-500: #e4294d;
  --mf-danger-600: #e95673;
  --mf-danger-700: #ef7f95;
  --mf-danger-800: #f4a8b8;
  --mf-danger-900: #fad6dd;
  --mf-danger-1000: #ffffff;
  --mf-warning-0: #161616;
  --mf-warning-50: #431f00;
  --mf-warning-100: #5f2a00;
  --mf-warning-200: #8d3f00;
  --mf-warning-300: #c05600;
  --mf-warning-400: #ef6b00;
  --mf-warning-500: #ff8722;
  --mf-warning-600: #ff9d4d;
  --mf-warning-700: #ffb77c;
  --mf-warning-800: #ffcfa6;
  --mf-warning-900: #ffe8d5;
  --mf-warning-1000: #ffffff;
  --mf-success-0: #161616;
  --mf-success-50: #123923;
  --mf-success-100: #125134;
  --mf-success-200: #1c7f50;
  --mf-success-300: #27ad6e;
  --mf-success-400: #39d28b;
  --mf-success-500: #64dca4;
  --mf-success-600: #85e4b8;
  --mf-success-700: #a3ebca;
  --mf-success-800: #c2f1db;
  --mf-success-900: #e7faf0;
  --mf-success-1000: #ffffff;
  --mf-neutral-0: #161616;
  --mf-neutral-50: #1a1a1a;
  --mf-neutral-100: #1f1f1f;
  --mf-neutral-200: #252525;
  --mf-neutral-300: #323232;
  --mf-neutral-400: #525252;
  --mf-neutral-500: #6e6e6e;
  --mf-neutral-600: #949494;
  --mf-neutral-700: #a6a6a6;
  --mf-neutral-800: #c3c3c3;
  --mf-neutral-900: #e1e1e1;
  --mf-neutral-1000: #ffffff;
  --mf-primary-surface-faint: #001b36;
  --mf-secondary-main: #43cadb;
  --mf-secondary-light: #043e45;
  --mf-secondary-dark: #7cdae6;
  --mf-secondary-contrast-text: #ffffffde;
  --mf-secondary-text: #43cadb;
  --mf-secondary-text-contrasting: #ffffffde;
  --mf-secondary-stroke: #43cadb;
  --mf-secondary-stroke-contrasting: #ffffffde;
  --mf-secondary-icon: #43cadb;
  --mf-secondary-icon-contrasting: #ffffffde;
  --mf-info-main: #0f8ef2;
  --mf-info-light: #0b6ab7;
  --mf-info-dark: #3f94e8;
  --mf-info-text: #0f8ef2;
  --mf-info-stroke: #0f8ef2;
  --mf-info-icon: #0f8ef2;
  --mf-danger-main: #e11b0c;
  --mf-danger-light: #a51f1f;
  --mf-danger-dark: #d63c3c;
  --mf-danger-text: #e11b0c;
  --mf-danger-stroke: #e11b0c;
  --mf-danger-icon: #e11b0c;
  --mf-warning-main: #ffa116;
  --mf-warning-light: #ce7b00;
  --mf-warning-dark: #ff901f;
  --mf-warning-contrast-text: #ffffffde;
  --mf-warning-text: #ffa116;
  --mf-warning-text-contrasting: #ffffffde;
  --mf-warning-stroke: #ffa116;
  --mf-warning-stroke-contrasting: #ffffffde;
  --mf-warning-icon: #ffa116;
  --mf-warning-icon-contrasting: #ffffffde;
  --mf-success-main: #5fb963;
  --mf-success-light: #419144;
  --mf-success-dark: #7dcc81;
  --mf-success-contrast-text: #ffffffde;
  --mf-success-text: #5fb963;
  --mf-success-text-contrasting: #ffffffde;
  --mf-success-surface: #0f452b;
  --mf-success-stroke: #56f0a8;
  --mf-success-stroke-contrasting: #ffffffde;
  --mf-success-icon: #5fb963;
  --mf-success-icon-contrasting: #ffffffde;
  --mf-accent-0-main: #1683ff;
  --mf-accent-0-light: #004089;
  --mf-accent-0-dark: #8cc2ff;
  --mf-accent-0-contrast-text: #161616;
  --mf-accent-1-main: #ffc30f;
  --mf-accent-1-light: #866400;
  --mf-accent-1-dark: #ffd973;
  --mf-accent-1-contrast-text: #161616;
  --mf-accent-2-main: #c95edb;
  --mf-accent-2-light: #b051c0;
  --mf-accent-2-dark: #c463de;
  --mf-accent-2-contrast-text: #161616;
  --mf-accent-3-main: #aa00c5;
  --mf-accent-3-light: #37003e;
  --mf-accent-3-dark: #fa59ff;
  --mf-accent-3-contrast-text: #161616;
  --mf-accent-4-main: #0000ed;
  --mf-accent-4-light: #0b7bd6;
  --mf-accent-4-dark: #6ca1f3;
  --mf-accent-4-contrast-text: #161616;
  --mf-background-default: #151522;
  --mf-background-paper: #161616;
  --mf-text-primary: #ffffffde;
  --mf-text-secondary: #ffffff99;
  --mf-text-disabled: #ffffff61;
  --mf-divider: #ffffff1f;
  --mf-action-active: #ffffff8a;
  --mf-action-hover: #ffffff0a;
  --mf-action-selected: #ffffff14;
  --mf-action-focus: #ffffff1f;
  --mf-action-disabled: #ffffff42;
  --mf-action-disabled-background: #ffffff1f;
  --mf-common-white: #161616;
  --mf-common-black: #ffffff;
  --mf-legacy-text-primary: #c0d0fa;
  --mf-legacy-text-primary-faded: #c0d0facc;
  --mf-legacy-text-primary-subtle: #97b5df;
  --mf-legacy-text-primary-subdued: #a6cfff;
  --mf-legacy-ds-text-primary: #a6cfffde;
  --mf-legacy-ds-text-secondary: #a6cfffcc;
  --mf-legacy-ds-action-hover: #8fa7b214;
  --mf-legacy-ds-action-selected: #8fa7b229;
  --mf-legacy-ds-action-disabled: #8fa7b261;
  --mf-legacy-background-default-light: #161d24;
  --mf-legacy-background-default-strong: #19192b;
  --mf-legacy-outside-background: #171b20;
  --mf-legacy-header-main: #1d1d1d;
  --mf-legacy-header-border: #333333;
  --mf-legacy-chapter-main: #1b222d;
  --mf-legacy-primary-light: #162b43;
  --mf-legacy-section-border: #261f43;
  --mf-legacy-section-disabled: #19212b;
  --mf-legacy-outline-weak: #ffffff1f;
  --mf-legacy-outline-default: #ffffff52;
  --mf-legacy-faint-backdrop-overlay: #ffffff0a;
  --mf-legacy-intro-test-header: #1683ff;
  --mf-legacy-intro-learn-header: #f0b500;
  --mf-legacy-intro-practice-header: #c95edb;
  --mf-legacy-alt-primary: #2d63ed;
  --mf-legacy-alt-primary-dark: #5883f0;
  --mf-legacy-alt-primary-inverse: #a9bff8;
  --mf-legacy-banner-info: #071a4e;
  --mf-legacy-banner-danger: #460a16;
  --mf-legacy-banner-warning: #532500;
  --mf-legacy-banner-success: #0a4725;
  --mf-legacy-banner-text-info: #7294f1;
  --mf-legacy-banner-text-danger: #ef7e95;
  --mf-legacy-banner-text-warning: #ff9d4d;
  --mf-legacy-banner-text-success: #7eefa4;
  --mf-elevation-1: 0px 2px 1px -1px rgba(105, 105, 105, 0.2), 0px 1px 1px 0px rgba(105, 105, 105, 0.14), 0px 1px 3px 0px rgba(105, 105, 105, 0.12);
  --mf-elevation-2: 0px 3px 1px -2px rgba(105, 105, 105, 0.2), 0px 2px 2px 0px rgba(105, 105, 105, 0.14), 0px 1px 5px 0px rgba(105, 105, 105, 0.12);
  --mf-elevation-3: 0px 3px 3px -2px rgba(105, 105, 105, 0.2), 0px 3px 4px 0px rgba(105, 105, 105, 0.14), 0px 1px 8px 0px rgba(105, 105, 105, 0.12);
  --mf-elevation-4: 0px 2px 4px -1px rgba(105, 105, 105, 0.2), 0px 4px 5px 0px rgba(105, 105, 105, 0.14), 0px 1px 10px 0px rgba(105, 105, 105, 0.12);
  --mf-elevation-6: 0px 3px 5px -1px rgba(105, 105, 105, 0.2), 0px 6px 10px 0px rgba(105, 105, 105, 0.14), 0px 1px 18px 0px rgba(105, 105, 105, 0.12);
  --mf-elevation-8: 0px 5px 5px -3px rgba(105, 105, 105, 0.2), 0px 8px 10px 1px rgba(105, 105, 105, 0.14), 0px 3px 14px 2px rgba(105, 105, 105, 0.12);
  --mf-elevation-12: 0px 7px 8px -4px rgba(105, 105, 105, 0.2), 0px 12px 17px 2px rgba(105, 105, 105, 0.14), 0px 5px 22px 4px rgba(105, 105, 105, 0.12);
  --mf-elevation-16: 0px 8px 10px -5px rgba(105, 105, 105, 0.2), 0px 16px 24px 2px rgba(105, 105, 105, 0.14), 0px 6px 30px 5px rgba(105, 105, 105, 0.12);
  --mf-elevation-24: 0px 11px 15px -7px rgba(105, 105, 105, 0.2), 0px 24px 38px 3px rgba(105, 105, 105, 0.14), 0px 9px 46px 8px rgba(105, 105, 105, 0.12);
}