@use "mixin";

:root {
  // Base colors
  --md-ref-palette-primary10: #00201e;
  --md-ref-palette-primary20: #003734;
  --md-ref-palette-primary30: #00504b;
  --md-ref-palette-primary40: #006a64;
  --md-ref-palette-primary80: #50dbd0;
  --md-ref-palette-primary90: #71f7ec;
  --md-ref-palette-primary100: #ffffff;
  --md-ref-palette-secondary10: #051f1d;
  --md-ref-palette-secondary20: #1c3532;
  --md-ref-palette-secondary30: #324b49;
  --md-ref-palette-secondary40: #4a6360;
  --md-ref-palette-secondary48: #5d7774;
  --md-ref-palette-secondary80: #b0ccc8;
  --md-ref-palette-secondary90: #cce8e4;
  --md-ref-palette-secondary100: #ffffff;
  --md-ref-palette-tertiary10: #001d33;
  --md-ref-palette-tertiary20: #18324a;
  --md-ref-palette-tertiary30: #304962;
  --md-ref-palette-tertiary40: #48617a;
  --md-ref-palette-tertiary80: #afc9e7;
  --md-ref-palette-tertiary90: #cfe5ff;
  --md-ref-palette-tertiary100: #ffffff;
  --md-ref-palette-neutral0: #000000;
  --md-ref-palette-neutral4: #0b0f0e;
  --md-ref-palette-neutral6: #101414;
  --md-ref-palette-neutral10: #191c1c;
  --md-ref-palette-neutral12: #1d2020;
  --md-ref-palette-neutral17: #272b2a;
  --md-ref-palette-neutral20: #2d3130;
  --md-ref-palette-neutral22: #323535;
  --md-ref-palette-neutral24: #363a39;
  --md-ref-palette-neutral50: #747877;
  --md-ref-palette-neutral87: #d8dbd9;
  --md-ref-palette-neutral90: #e0e3e2;
  --md-ref-palette-neutral92: #e6e9e7;
  --md-ref-palette-neutral94: #eceeed;
  --md-ref-palette-neutral95: #eff1f0;
  --md-ref-palette-neutral96: #f2f4f3;
  --md-ref-palette-neutral98: #f7faf8;
  --md-ref-palette-neutral100: #ffffff;
  --md-ref-palette-neutral-variant30: #3f4947;
  --md-ref-palette-neutral-variant50: #6f7977;
  --md-ref-palette-neutral-variant60: #899391;
  --md-ref-palette-neutral-variant80: #bec9c6;
  --md-ref-palette-neutral-variant90: #dae5e2;
  --md-ref-palette-error10: #410002;
  --md-ref-palette-error20: #690005;
  --md-ref-palette-error30: #93000a;
  --md-ref-palette-error40: #ba1a1a;
  --md-ref-palette-error80: #ffb4ab;
  --md-ref-palette-error90: #ffdad6;
  --md-ref-palette-error100: #ffffff;
  --md-ref-palette-blue10: #002022;
  --md-ref-palette-blue20: #00363b;
  --md-ref-palette-blue30: #004f55;
  --md-ref-palette-blue40: #006970;
  --md-ref-palette-blue80: #4dd9e5;
  --md-ref-palette-blue90: #7ff4ff;
  --md-ref-palette-blue95: #c7faff;
  --md-ref-palette-green10: #002019;
  --md-ref-palette-green20: #00382c;
  --md-ref-palette-green30: #005141;
  --md-ref-palette-green40: #006b57;
  --md-ref-palette-green80: #5ddbbb;
  --md-ref-palette-green90: #7cf8d7;
  --md-ref-palette-green95: #b8ffe9;
  --md-ref-palette-purple10: #190261;
  --md-ref-palette-purple20: #2f2176;
  --md-ref-palette-purple30: #463a8d;
  --md-ref-palette-purple40: #5e52a7;
  --md-ref-palette-purple80: #c8bfff;
  --md-ref-palette-purple90: #e5deff;
  --md-ref-palette-purple95: #f4eeff;
  --md-ref-palette-red10: #3d0024;
  --md-ref-palette-red20: #5c113b;
  --md-ref-palette-red30: #792953;
  --md-ref-palette-red40: #96416b;
  --md-ref-palette-red80: #ffafd1;
  --md-ref-palette-red90: #ffd8e6;
  --md-ref-palette-red95: #ffecf1;
  --md-ref-palette-yellow10: #1e1c00;
  --md-ref-palette-yellow20: #343200;
  --md-ref-palette-yellow30: #4c4900;
  --md-ref-palette-yellow40: #656100;
  --md-ref-palette-yellow80: #d1cb54;
  --md-ref-palette-yellow90: #eee76c;
  --md-ref-palette-yellow95: #fcf579;
  --md-sys-state-hover-state-layer: #00000014;
  --md-sys-state-focus-state-layer: #0000001a;
  --md-sys-state-pressed-state-layer: #0000001a;

  // Motion(https://m3.material.io/styles/motion/overview/specs)
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --md-sys-motion-easing-liner: cubic-bezier(0, 0, 1, 1);
  --md-sys-motion-path: var(--md-sys-motion-easing-liner);
  --md-sys-motion-spring-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
  --md-sys-motion-spring-fast-spatial-duration: 350ms;
  --md-sys-motion-spring-fast-spatial-standard: cubic-bezier(0.27, 1.06, 0.18, 1);
  --md-sys-motion-spring-fast-spatial-standard-duration: 350ms;
  --md-sys-motion-spring-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
  --md-sys-motion-spring-default-spatial-duration: 500ms;
  --md-sys-motion-spring-default-spatial-standard: cubic-bezier(0.27, 1.06, 0.18, 1);
  --md-sys-motion-spring-default-spatial-standard-duration: 500ms;
  --md-sys-motion-spring-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
  --md-sys-motion-spring-slow-spatial-duration: 650ms;
  --md-sys-motion-spring-slow-spatial-standard: cubic-bezier(0.27, 1.06, 0.18, 1);
  --md-sys-motion-spring-slow-spatial-standard-duration: 750ms;
  --md-sys-motion-spring-fast-effect: cubic-bezier(0.31, 0.94, 0.34, 1);
  --md-sys-motion-spring-fast-effect-duration: 150ms;
  --md-sys-motion-spring-fast-effect-standard: cubic-bezier(0.31, 0.94, 0.34, 1);
  --md-sys-motion-spring-fast-effect-standard-duration: 150ms;
  --md-sys-motion-spring-default-effect: cubic-bezier(0.34, 0.8, 0.34, 1);
  --md-sys-motion-spring-default-effect-duration: 200ms;
  --md-sys-motion-spring-default-effect-standard: cubic-bezier(0.34, 0.8, 0.34, 1);
  --md-sys-motion-spring-default-effect-standard-duration: 200ms;
  --md-sys-motion-spring-slow-effect: cubic-bezier(0.34, 0.88, 0.34, 1);
  --md-sys-motion-spring-slow-effect-duration: 300ms;
  --md-sys-motion-spring-slow-effect-standard: cubic-bezier(0.34, 0.88, 0.34, 1);
  --md-sys-motion-spring-slow-effect-standard-duration: 300ms;

  // Shape(https://m3.material.io/styles/shape/corner-radius-scale)
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-large-top: 16px 16px 0px 0px;
  --md-sys-shape-corner-large-start: 16px 0px 0px 16px;
  --md-sys-shape-corner-large-end: 0px 16px 16px 0px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-top: 28px 28px 0px 0px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large: 40px;
  --md-sys-shape-corner-full: 100px;

  // MD Ripple(material-web)
  --md-ripple-hover-color: var(--md-sys-color-primary);
  --md-ripple-pressed-color: var(--md-sys-color-primary);

  // Typography
  $level1-font-family: "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
  $level2-font-family: "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
  @include mixin.typescale("display-large", $level1-font-family, 57, -0.25, 64, 400);
  @include mixin.typescale("display-medium", $level1-font-family, 45, 0, 52, 400);
  @include mixin.typescale("display-small", $level1-font-family, 36, 0, 44, 400);
  @include mixin.typescale("headline-large", $level1-font-family, 32, 0, 40, 400);
  @include mixin.typescale("headline-medium", $level1-font-family, 28, 0, 36, 400);
  @include mixin.typescale("headline-small", $level1-font-family, 24, 0, 32, 400);
  @include mixin.typescale("title-large", $level1-font-family, 22, 0, 28, 400);
  @include mixin.typescale("title-medium", $level2-font-family, 16, 0.15, 24, 500);
  @include mixin.typescale("title-small", $level2-font-family, 14, 0.1, 20, 500);
  @include mixin.typescale("body-large", $level2-font-family, 16, 0.5, 24, 400);
  @include mixin.typescale("body-medium", $level2-font-family, 14, 0.25, 20, 400);
  @include mixin.typescale("body-small", $level2-font-family, 12, 0.4, 16, 400);
  @include mixin.typescale("label-large", $level2-font-family, 14, 0.1, 20, 500);
  @include mixin.typescale("label-medium", $level2-font-family, 12, 0.5, 16, 500);
  @include mixin.typescale("label-small", $level2-font-family, 11, 0.5, 16, 500);

  // Svg
  --via-svg-mask: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQyNy44NjQgNDI3Ljg2NGMtMTMuNTc4IDEzLjU3Ny0yNy42MTggOS40NTQtNDMuNTgzIDIwLjEyMi0xNS45NjYgMTAuNjY4LTE3LjUzIDI1LjIxNy0zNS4yNjkgMzIuNTY1LTE3Ljc0IDcuMzQ4LTI5LjEzMy0xLjgzNC00Ny45NjYgMS45MTItMTguODMyIDMuNzQ2LTI1Ljg0NCAxNi41OS00NS4wNDYgMTYuNTktMTkuMjAyIDAtMjYuMjE0LTEyLjg0NC00NS4wNDYtMTYuNTktMTguODMzLTMuNzQ2LTMwLjIyNiA1LjQzNi00Ny45NjYtMS45MTItMTcuNzQtNy4zNDgtMTkuMzAzLTIxLjg5Ny0zNS4yNjktMzIuNTY1LTE1Ljk2NS0xMC42NjgtMzAuMDA1LTYuNTQ1LTQzLjU4My0yMC4xMjItMTMuNTc3LTEzLjU3OC05LjQ1NC0yNy42MTgtMjAuMTIyLTQzLjU4My0xMC42NjgtMTUuOTY2LTI1LjIxNy0xNy41My0zMi41NjUtMzUuMjY5LTcuMzQ4LTE3Ljc0IDEuODM0LTI5LjEzMy0xLjkxMi00Ny45NjYtMy43NDYtMTguODMyLTE2LjU5LTI1Ljg0NC0xNi41OS00NS4wNDYgMC0xOS4yMDIgMTIuODQ0LTI2LjIxNCAxNi41OS00NS4wNDYgMy43NDYtMTguODMzLTUuNDM2LTMwLjIyNiAxLjkxMi00Ny45NjYgNy4zNDgtMTcuNzQgMjEuODk3LTE5LjMwMyAzMi41NjUtMzUuMjY5IDEwLjY2OC0xNS45NjUgNi41NDUtMzAuMDA1IDIwLjEyMi00My41ODMgMTMuNTc4LTEzLjU3NyAyNy42MTgtOS40NTQgNDMuNTgzLTIwLjEyMiAxNS45NjYtMTAuNjY4IDE3LjUzLTI1LjIxNyAzNS4yNjktMzIuNTY1IDE3Ljc0LTcuMzQ4IDI5LjEzMyAxLjgzNCA0Ny45NjYtMS45MTIgMTguODMyLTMuNzQ2IDI1Ljg0NC0xNi41OSA0NS4wNDYtMTYuNTkgMTkuMjAyIDAgMjYuMjE0IDEyLjg0NCA0NS4wNDYgMTYuNTkgMTguODMzIDMuNzQ2IDMwLjIyNi01LjQzNiA0Ny45NjYgMS45MTIgMTcuNzQgNy4zNDggMTkuMzAzIDIxLjg5NyAzNS4yNjkgMzIuNTY1IDE1Ljk2NSAxMC42NjggMzAuMDA1IDYuNTQ1IDQzLjU4MyAyMC4xMjIgMTMuNTc3IDEzLjU3OCA5LjQ1NCAyNy42MTggMjAuMTIyIDQzLjU4MyAxMC42NjggMTUuOTY2IDI1LjIxNyAxNy41MyAzMi41NjUgMzUuMjY5IDcuMzQ4IDE3Ljc0LTEuODM0IDI5LjEzMyAxLjkxMiA0Ny45NjYgMy43NDYgMTguODMyIDE2LjU5IDI1Ljg0NCAxNi41OSA0NS4wNDYgMCAxOS4yMDItMTIuODQ0IDI2LjIxNC0xNi41OSA0NS4wNDYtMy43NDYgMTguODMzIDUuNDM2IDMwLjIyNi0xLjkxMiA0Ny45NjYtNy4zNDggMTcuNzQtMjEuODk3IDE5LjMwMy0zMi41NjUgMzUuMjY5LTEwLjY2OCAxNS45NjUtNi41NDUgMzAuMDA1LTIwLjEyMiA0My41ODN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
  --via-svg-wave: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIC01IDMwIDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDFjNy41IDAgNy41IDggMTUgOHM3LjUtOCAxNS04IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI0Ii8+PC9zdmc+");
  --via-svg-qrcode-rickroll: url("data:image/svg+xml;charset=utf-8;base64, ");
  --via-svg-list-bullet: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0ibTEzLjcxNiA3LjQ1Ni0zLjk4IDIuMTc3LTIuMTc2IDMuOTgtMi4xNzctMy45OC0zLjk4LTIuMTc3IDMuOTgtMi4xNzZMNy41NiAxLjNsMi4xNzYgMy45OFoiIHN0eWxlPSJmaWxsOiMwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjIuMDAwNzQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjg2IDEuOTQ0KSBzY2FsZSguODEyMTgpIi8+PC9zdmc+");

  // Colors scheme
  @media (prefers-color-scheme: light) {
    --md-sys-color-primary: var(--md-ref-palette-primary40);
    --md-sys-color-primary-container: var(--md-ref-palette-primary90);
    --md-sys-color-on-primary: var(--md-ref-palette-primary100);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
    --md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
    --md-sys-color-secondary: var(--md-ref-palette-secondary40);
    --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
    --md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
    --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
    --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
    --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
    --md-sys-color-surface: var(--md-ref-palette-neutral98);
    --md-sys-color-surface-dim: var(--md-ref-palette-neutral87);
    --md-sys-color-surface-bright: var(--md-ref-palette-neutral98);
    --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
    --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96);
    --md-sys-color-surface-container: var(--md-ref-palette-neutral94);
    --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92);
    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
    --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
    --md-sys-color-background: var(--md-ref-palette-neutral98);
    --md-sys-color-on-background: var(--md-ref-palette-neutral10);
    --md-sys-color-error: var(--md-ref-palette-error40);
    --md-sys-color-error-container: var(--md-ref-palette-error90);
    --md-sys-color-on-error: var(--md-ref-palette-error100);
    --md-sys-color-on-error-container: var(--md-ref-palette-error10);
    --md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
    --md-sys-color-shadow: var(--md-ref-palette-neutral0);
    --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
    --md-sys-color-scrim: var(--md-ref-palette-neutral0);

    --md-sys-color-red: var(--md-ref-palette-red40);
    --md-sys-color-red-container: var(--md-ref-palette-red90);
    --md-sys-color-on-red: var(--md-ref-palette-red95);
    --md-sys-color-on-red-container: var(--md-ref-palette-red10);
    --md-sys-color-inverse-red: var(--md-ref-palette-red80);

    --md-sys-color-blue: var(--md-ref-palette-blue40);
    --md-sys-color-blue-container: var(--md-ref-palette-blue90);
    --md-sys-color-on-blue: var(--md-ref-palette-blue95);
    --md-sys-color-on-blue-container: var(--md-ref-palette-blue10);
    --md-sys-color-inverse-blue: var(--md-ref-palette-blue80);

    --md-sys-color-green: var(--md-ref-palette-green40);
    --md-sys-color-green-container: var(--md-ref-palette-green90);
    --md-sys-color-on-green: var(--md-ref-palette-green95);
    --md-sys-color-on-green-container: var(--md-ref-palette-green10);
    --md-sys-color-inverse-green: var(--md-ref-palette-green80);

    --md-sys-color-yellow: var(--md-ref-palette-yellow40);
    --md-sys-color-yellow-container: var(--md-ref-palette-yellow90);
    --md-sys-color-on-yellow: var(--md-ref-palette-yellow95);
    --md-sys-color-on-yellow-container: var(--md-ref-palette-yellow10);
    --md-sys-color-inverse-yellow: var(--md-ref-palette-yellow80);

    --md-sys-color-purple: var(--md-ref-palette-purple40);
    --md-sys-color-purple-container: var(--md-ref-palette-purple90);
    --md-sys-color-on-purple: var(--md-ref-palette-purple95);
    --md-sys-color-on-purple-container: var(--md-ref-palette-purple10);
    --md-sys-color-inverse-purple: var(--md-ref-palette-purple80);
  }

  @media (prefers-color-scheme: dark) {
    --md-sys-color-primary: var(--md-ref-palette-primary80);
    --md-sys-color-primary-container: var(--md-ref-palette-primary30);
    --md-sys-color-on-primary: var(--md-ref-palette-primary20);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
    --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
    --md-sys-color-secondary: var(--md-ref-palette-secondary80);
    --md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
    --md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
    --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
    --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
    --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
    --md-sys-color-surface: var(--md-ref-palette-neutral6);
    --md-sys-color-surface-dim: var(--md-ref-palette-neutral6);
    --md-sys-color-surface-bright: var(--md-ref-palette-neutral24);
    --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral4);
    --md-sys-color-surface-container-low: var(--md-ref-palette-neutral10);
    --md-sys-color-surface-container: var(--md-ref-palette-neutral12);
    --md-sys-color-surface-container-high: var(--md-ref-palette-neutral17);
    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);
    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
    --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
    --md-sys-color-background: var(--md-ref-palette-neutral6);
    --md-sys-color-on-background: var(--md-ref-palette-neutral90);
    --md-sys-color-error: var(--md-ref-palette-error80);
    --md-sys-color-error-container: var(--md-ref-palette-error30);
    --md-sys-color-on-error: var(--md-ref-palette-error20);
    --md-sys-color-on-error-container: var(--md-ref-palette-error90);
    --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
    --md-sys-color-shadow: var(--md-ref-palette-neutral0);
    --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
    --md-sys-color-scrim: var(--md-ref-palette-neutral0);

    --md-sys-color-red: var(--md-ref-palette-red80);
    --md-sys-color-red-container: var(--md-ref-palette-red30);
    --md-sys-color-on-red: var(--md-ref-palette-red20);
    --md-sys-color-on-red-container: var(--md-ref-palette-red90);
    --md-sys-color-inverse-red: var(--md-ref-palette-red40);

    --md-sys-color-blue: var(--md-ref-palette-blue80);
    --md-sys-color-blue-container: var(--md-ref-palette-blue30);
    --md-sys-color-on-blue: var(--md-ref-palette-blue20);
    --md-sys-color-on-blue-container: var(--md-ref-palette-blue90);
    --md-sys-color-inverse-blue: var(--md-ref-palette-blue40);

    --md-sys-color-green: var(--md-ref-palette-green80);
    --md-sys-color-green-container: var(--md-ref-palette-green30);
    --md-sys-color-on-green: var(--md-ref-palette-green20);
    --md-sys-color-on-green-container: var(--md-ref-palette-green90);
    --md-sys-color-inverse-green: var(--md-ref-palette-green40);

    --md-sys-color-yellow: var(--md-ref-palette-yellow80);
    --md-sys-color-yellow-container: var(--md-ref-palette-yellow30);
    --md-sys-color-on-yellow: var(--md-ref-palette-yellow20);
    --md-sys-color-on-yellow-container: var(--md-ref-palette-yellow90);
    --md-sys-color-inverse-yellow: var(--md-ref-palette-yellow40);

    --md-sys-color-purple: var(--md-ref-palette-purple80);
    --md-sys-color-purple-container: var(--md-ref-palette-purple30);
    --md-sys-color-on-purple: var(--md-ref-palette-purple20);
    --md-sys-color-on-purple-container: var(--md-ref-palette-purple90);
    --md-sys-color-inverse-purple: var(--md-ref-palette-purple40);
  }
}
