@use 'sass:color';
@use 'sass:map';

$color-default: (
  // Main
  'primary-25': #f7f9ff,
  'primary-50': #f2f6ff,
  'primary-75': #eef2ff,
  'primary-100': #e6edff,
  'primary-200': #d9e3ff,
  'primary-300': #b0c6ff,
  'primary-400': #8cacff,
  'primary-500': #5987ff,
  'primary-600': #0046ff,
  'primary-700': #0035bf,
  'primary-800': #002a99,
  'primary-900': #001f73,
  'primary-950': #001959,

  'secondary-25': #fffcf7,
  'secondary-50': #fff5e5,
  'secondary-75': #ffebcc,
  'secondary-100': #ffe1b4,
  'secondary-200': #ffd392,
  'secondary-300': #ffcb7d,
  'secondary-400': #ffbe5c,
  'secondary-500': #fea439,
  'secondary-600': #fc8713,
  'secondary-700': #ed6c09,
  'secondary-800': #c55109,
  'secondary-900': #9e4107,
  'secondary-950': #763105,

  'neutral-25': #f9fafd,
  'neutral-50': #eceff9,
  'neutral-75': #d1d9f1,
  'neutral-100': #c1ccec,
  'neutral-200': #b0bde6,
  'neutral-300': #9eaee1,
  'neutral-400': #8ea1dc,
  'neutral-500': #7c92d6,
  'neutral-600': #6c85d1,
  'neutral-700': #51649d,
  'neutral-800': #41507d,
  'neutral-900': #313c5e,
  'neutral-950': #26324b,

  'grey-25': #fafafb,
  'grey-50': #f6f6f8,
  'grey-75': #ededf0,
  'grey-100': #e1e1e7,
  'grey-200': #d4d4dc,
  'grey-300': #b9b9c5,
  'grey-400': #a0a0b1,
  'grey-500': #84849b,
  'grey-600': #696984,
  'grey-700': #505070,
  'grey-800': #353559,
  'grey-900': #1c1c45,
  'grey-950': #00002e,

  'grey-alpha-25': color-mix(in srgb, #00002e 2.5%, transparent),
  'grey-alpha-50': color-mix(in srgb, #00002e 5%, transparent),
  'grey-alpha-75': color-mix(in srgb, #00002e 7.5%, transparent),
  'grey-alpha-100': color-mix(in srgb, #00002e 10%, transparent),
  'grey-alpha-200': color-mix(in srgb, #00002e 20%, transparent),
  'grey-alpha-300': color-mix(in srgb, #00002e 30%, transparent),
  'grey-alpha-400': color-mix(in srgb, #00002e 40%, transparent),
  'grey-alpha-500': color-mix(in srgb, #00002e 50%, transparent),
  'grey-alpha-600': color-mix(in srgb, #00002e 60%, transparent),
  'grey-alpha-700': color-mix(in srgb, #00002e 72%, transparent),
  'grey-alpha-800': color-mix(in srgb, #00002e 80%, transparent),
  'grey-alpha-900': color-mix(in srgb, #00002e 90%, transparent),
  'grey-alpha-950': color-mix(in srgb, #00002e 95%, transparent),
  'white-alpha-25': color-mix(in srgb, #fff 2.5%, transparent),
  'white-alpha-50': color-mix(in srgb, #fff 5%, transparent),
  'white-alpha-75': color-mix(in srgb, #fff 7.5%, transparent),
  'white-alpha-100': color-mix(in srgb, #fff 10%, transparent),
  'white-alpha-200': color-mix(in srgb, #fff 15%, transparent),
  'white-alpha-300': color-mix(in srgb, #fff 30%, transparent),
  'white-alpha-400': color-mix(in srgb, #fff 40%, transparent),
  'white-alpha-500': color-mix(in srgb, #fff 50%, transparent),
  'white-alpha-600': color-mix(in srgb, #fff 60%, transparent),
  'white-alpha-700': color-mix(in srgb, #fff 72%, transparent),
  'white-alpha-800': color-mix(in srgb, #fff 80%, transparent),
  'white-alpha-900': color-mix(in srgb, #fff 90%, transparent),
  'white-alpha-950': color-mix(in srgb, #fff 95%, transparent),
  'monochrome-25': #fbfbfb,
  'monochrome-50': #f7f7f7,
  'monochrome-75': #efefef,
  'monochrome-100': #e4e4e4,
  'monochrome-200': #d8d8d8,
  'monochrome-300': #bfbfbf,
  'monochrome-400': #a9a9a9,
  'monochrome-500': #909090,
  'monochrome-600': #777,
  'monochrome-700': #606060,
  'monochrome-800': #474747,
  'monochrome-900': #313131,
  'monochrome-950': #171717,

  // Status
  'info-25': #f9fbfd,
  'info-50': #f5f7fb,
  'info-75': #ebeff7,
  'info-100': #dee4f2,
  'info-200': #bfcce6,
  'info-300': #a3b6da,
  'info-400': #859dce,
  'info-500': #6685c2,
  'info-600': #3b62b0,
  'info-700': #1c49a4,
  'info-800': #039,
  'info-900': #00297a,
  'info-950': #001f5c,

  'success-25': #f9fefc,
  'success-50': #edfbf6,
  'success-75': #e3f9f0,
  'success-100': #daf6eb,
  'success-200': #b2edd6,
  'success-300': #8fe5c4,
  'success-400': #5ddaa9,
  'success-500': #05c67b,
  'success-600': #05b26f,
  'success-700': #049e62,
  'success-800': #037e4e,
  'success-900': #025f3b,
  'success-950': #02472c,

  'error-25': #fefafa,
  'error-50': #fdefef,
  'error-75': #fce9ea,
  'error-100': #f5bbbe,
  'error-200': #f09a9e,
  'error-300': #ea6c72,
  'error-400': #e54f57,
  'error-500': #df232d,
  'error-600': #cb2029,
  'error-700': #9e1920,
  'error-800': #7b1319,
  'error-900': #5a0e12,
  'error-950': #1f0506,

  'warning-25': #fffaf5,
  'warning-50': #fff3e8,
  'warning-75': #ffeddc,
  'warning-100': #ffdbba,
  'warning-200': #ffc998,
  'warning-300': #ffb16a,
  'warning-400': #ffa14d,
  'warning-500': #ff8a20,
  'warning-600': #e87e1d,
  'warning-700': #ba6517,
  'warning-800': #8b4c11,
  'warning-900': #68390d,
  'warning-950': #512c0a
) !default;
$color-palette: (
  // Priority colors
  'blue-50': #e6edff,
  'blue-100': #d9e3ff,
  'blue-200': #b0c6ff,
  'blue-300': #8cacff,
  'blue-400': #5987ff,
  'blue-500': #0046ff,
  'blue-600': #003fe6,
  'blue-700': #0038cc,
  'blue-800': #0035bf,
  'blue-900': #002a99,

  'blue-navy-50': #f5f5fa,
  'blue-navy-100': #f0f0f8,
  'blue-navy-200': #d9d9ec,
  'blue-navy-300': #bfbfe0,
  'blue-navy-400': #a0a0d1,
  'blue-navy-500': #8c8cc7,
  'blue-navy-600': #4545a4,
  'blue-navy-700': #000083,
  'blue-navy-800': #000069,
  'blue-navy-900': #00002e,

  'blue-electric-50': #e6f8fd,
  'blue-electric-100': #d9f5fb,
  'blue-electric-200': #b1eaf7,
  'blue-electric-300': #5bd3ef,
  'blue-electric-400': #03bbe6,
  'blue-electric-500': #03a8cf,
  'blue-electric-600': #028cad,
  'blue-electric-700': #02708a,
  'blue-electric-800': #015467,
  'blue-electric-900': #014959,

  'green-50': #e6f9f2,
  'green-100': #daf6eb,
  'green-200': #b2edd6,
  'green-300': #8fe5c4,
  'green-400': #5ddaa9,
  'green-500': #05c67b,
  'green-600': #05b26f,
  'green-700': #049e62,
  'green-800': #04955c,
  'green-900': #03774a,

  'green-dark-50': #e6f0f0,
  'green-dark-100': #d9e8e8,
  'green-dark-200': #b0d0d0,
  'green-dark-300': #8cbaba,
  'green-dark-400': #599c9c,
  'green-dark-500': #066,
  'green-dark-600': #005c5c,
  'green-dark-700': #005252,
  'green-dark-800': #004d4d,
  'green-dark-900': #003d3d,

  'orange-50': #fff3e9,
  'orange-100': #ffe9d6,
  'orange-200': #ffdbba,
  'orange-300': #ffc998,
  'orange-400': #ffb16a,
  'orange-500': #ff8a20,
  'orange-600': #e87e1d,
  'orange-700': #b56217,
  'orange-800': #8c4c12,
  'orange-900': #6b3a0d,

  'purple-50': #f4effb,
  'purple-100': #ebe1f8,
  'purple-200': #ddcdf3,
  'purple-300': #ccb5ee,
  'purple-400': #b594e6,
  'purple-500': #905fd9,
  'purple-600': #8356c5,
  'purple-700': #66439a,
  'purple-800': #4f3477,
  'purple-900': #3c285b,

  // Supplementary colors
  'blue-ocean-50': #e8f8f6,
  'blue-ocean-100': #dcf5f2,
  'blue-ocean-200': #b7eae4,
  'blue-ocean-300': #97e0d8,
  'blue-ocean-400': #69d2c6,
  'blue-ocean-500': #18baa8,
  'blue-ocean-600': #16a797,
  'blue-ocean-700': #139586,
  'blue-ocean-800': #128c7e,
  'blue-ocean-900': #0e7065,

  'green-lemon-50': #fafcee,
  'green-lemon-100': #f7fbe5,
  'green-lemon-200': #eff6c9,
  'green-lemon-300': #e8f2b0,
  'green-lemon-400': #ddec8d,
  'green-lemon-500': #cbe250,
  'green-lemon-600': #b7cb48,
  'green-lemon-700': #a2b540,
  'green-lemon-800': #98aa3c,
  'green-lemon-900': #7a8830,

  'green-pine-50': #eff3f3,
  'green-pine-100': #dae2e4,
  'green-pine-200': #ced8db,
  'green-pine-300': #b6c6ca,
  'green-pine-400': #94abb1,
  'green-pine-500': #809ba2,
  'green-pine-600': #445c63,
  'green-pine-700': #0a3f4d,
  'green-pine-800': #08323e,
  'green-pine-900': #082f3a,

  'red-crayola-50': #fcebee,
  'red-crayola-100': #f6c1ca,
  'red-crayola-200': #f2a3b1,
  'red-crayola-300': #ec798d,
  'red-crayola-400': #e95f77,
  'red-crayola-500': #e33755,
  'red-crayola-600': #cf324d,
  'red-crayola-700': #a1273c,
  'red-crayola-800': #7d1e2f,
  'red-crayola-900': #5f1724,

  'warm-grey-50': #f6f4f3,
  'warm-grey-100': #e2dcda,
  'warm-grey-200': #d3cbc8,
  'warm-grey-300': #bfb4af,
  'warm-grey-400': #b3a59f,
  'warm-grey-500': #a08f87,
  'warm-grey-600': #92827b,
  'warm-grey-700': #726660,
  'warm-grey-800': #584f4a,
  'warm-grey-900': #433c39,

  'yellow-gold-50': #fffae6,
  'yellow-gold-100': #fff3c2,
  'yellow-gold-200': #ffea91,
  'yellow-gold-300': #ffe05e,
  'yellow-gold-400': #ffd72e,
  'yellow-gold-500': #ffce00,
  'yellow-gold-600': #d9af00,
  'yellow-gold-700': #b59200,
  'yellow-gold-800': #917500,
  'yellow-gold-900': #735d00,

  'orange-abricot-50': #fff9ed,
  'orange-abricot-100': #fff1d4,
  'orange-abricot-200': #ffdfa9,
  'orange-abricot-300': #ffbe5c,
  'orange-abricot-400': #fea439,
  'orange-abricot-500': #fc8713,
  'orange-abricot-600': #ed6c09,
  'orange-abricot-700': #c55109,
  'orange-abricot-800': #9c4010,
  'orange-abricot-900': #7e3610,

  'purple-violet-50': #f3f1ff,
  'purple-violet-100': #dbd4ff,
  'purple-violet-200': #cabfff,
  'purple-violet-300': #b1a1ff,
  'purple-violet-400': #a28fff,
  'purple-violet-500': #8b73ff,
  'purple-violet-600': #7e69e8,
  'purple-violet-700': #6352b5,
  'purple-violet-800': #4c3f8c,
  'purple-violet-900': #3a306b,

  'red-tomato-50': #fff0ed,
  'red-tomato-100': #ffd0c7,
  'red-tomato-200': #ffbaac,
  'red-tomato-300': #ff9a86,
  'red-tomato-400': #ff866e,
  'red-tomato-500': #ff684a,
  'red-tomato-600': #e85f43,
  'red-tomato-700': #b54a35,
  'red-tomato-800': #8c3929,
  'red-tomato-900': #6b2c1f
) !default;
$color-other: (
  'corporate-gradient': linear-gradient(
      90deg,
      #155dfc 0%,
      #1447e6 50%,
      #010492 100%
    ),
) !default;
$color-modes: (
  'blue': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'blue-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'green-lemon-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'blue-100'),
    '--cm-surface-low-1': map.get($color-palette, 'blue-200'),
    '--cm-surface-low-2': map.get($color-palette, 'blue-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'blue-200'),
    '--cm-surface-medium-1': map.get($color-palette, 'blue-300'),
    '--cm-surface-0': map.get($color-palette, 'blue-500'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'blue-500'),
    '--cm-surface-0-text-media': map.get($color-palette, 'blue-400'),
    '--cm-surface-variant-1': map.get($color-palette, 'blue-navy-700'),
    '--cm-surface-variant-2': map.get($color-palette, 'blue-navy-700'),
    // on surface
    '--cm-on-surface-add-to-calendar': #fff,
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': #fff,
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'blue-700'),
    '--cm-on-surface-1': map.get($color-palette, 'blue-500'),
    '--cm-on-surface-2': map.get($color-palette, 'green-lemon-500'),
    '--cm-on-surface-3': map.get($color-palette, 'blue-500'),
    '--cm-on-surface-highlight': map.get($color-palette, 'blue-100'),
    // border
    '--cm-border-low': map.get($color-palette, 'blue-200'),
    '--cm-border-medium': map.get($color-palette, 'blue-400'),
    '--cm-border': map.get($color-palette, 'blue-500'),
    '--cm-border-high': map.get($color-palette, 'blue-600'),
  ),
  'green-dark': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'green-dark-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'green-lemon-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'green-dark-100'),
    '--cm-surface-low-1': map.get($color-palette, 'green-dark-200'),
    '--cm-surface-low-2': map.get($color-palette, 'green-dark-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'green-dark-200'),
    '--cm-surface-medium-1': map.get($color-palette, 'green-dark-300'),
    '--cm-surface-0': map.get($color-palette, 'green-dark-900'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'green-dark-900'),
    '--cm-surface-0-text-media': map.get($color-palette, 'green-dark-900'),
    '--cm-surface-variant-1': map.get($color-palette, 'green-lemon-300'),
    '--cm-surface-variant-2': map.get($color-palette, 'green-dark-900'),
    // on surface
    '--cm-on-surface-add-to-calendar': #fff,
    '--cm-on-surface-text-media': #fff,
    '--cm-on-surface-swap-0': #fff,
    '--cm-on-surface-swap-1': var(--c-g-950),
    '--cm-on-surface': map.get($color-palette, 'green-dark-600'),
    '--cm-on-surface-1': map.get($color-palette, 'green-dark-500'),
    '--cm-on-surface-2': map.get($color-palette, 'green-lemon-500'),
    '--cm-on-surface-3': map.get($color-palette, 'green-dark-500'),
    '--cm-on-surface-highlight': map.get($color-palette, 'green-dark-100'),
    // border
    '--cm-border-low': map.get($color-palette, 'green-dark-200'),
    '--cm-border-medium': map.get($color-palette, 'green-dark-500'),
    '--cm-border': map.get($color-palette, 'green-dark-500'),
    '--cm-border-high': map.get($color-palette, 'green-dark-600'),
  ),
  'orange': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'orange-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'blue-ocean-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'orange-100'),
    '--cm-surface-low-1': map.get($color-palette, 'orange-200'),
    '--cm-surface-low-2': map.get($color-palette, 'orange-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'orange-200'),
    '--cm-surface-medium-1': map.get($color-palette, 'orange-300'),
    '--cm-surface-0': map.get($color-palette, 'orange-400'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'orange-500'),
    '--cm-surface-0-text-media': map.get($color-palette, 'orange-400'),
    '--cm-surface-variant-1': map.get($color-palette, 'green-pine-700'),
    '--cm-surface-variant-2': map.get($color-palette, 'green-pine-700'),
    // on surface
    '--cm-on-surface-add-to-calendar': var(--c-g-950),
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': var(--c-g-950),
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'orange-800'),
    '--cm-on-surface-1': map.get($color-palette, 'orange-500'),
    '--cm-on-surface-2': map.get($color-palette, 'blue-ocean-400'),
    '--cm-on-surface-3': map.get($color-palette, 'orange-500'),
    '--cm-on-surface-highlight': color-mix(
        in srgb,
        map.get($color-palette, 'orange-100') 60%,
        transparent
      ),
    // border
    '--cm-border-low': map.get($color-palette, 'orange-200'),
    '--cm-border-medium': map.get($color-palette, 'orange-500'),
    '--cm-border': map.get($color-palette, 'orange-500'),
    '--cm-border-high': map.get($color-palette, 'orange-600'),
  ),
  'green': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'green-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'warm-grey-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'green-100'),
    '--cm-surface-low-1': map.get($color-palette, 'green-200'),
    '--cm-surface-low-2': map.get($color-palette, 'green-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'green-300'),
    '--cm-surface-medium-1': map.get($color-palette, 'green-400'),
    '--cm-surface-0': map.get($color-palette, 'green-500'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'green-500'),
    '--cm-surface-0-text-media': map.get($color-palette, 'green-500'),
    '--cm-surface-variant-1': map.get($color-palette, 'green-dark-900'),
    '--cm-surface-variant-2': map.get($color-palette, 'green-dark-900'),
    // on surface
    '--cm-on-surface-add-to-calendar': var(--c-g-950),
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': var(--c-g-950),
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'green-900'),
    '--cm-on-surface-1': map.get($color-palette, 'green-500'),
    '--cm-on-surface-2': map.get($color-palette, 'warm-grey-300'),
    '--cm-on-surface-3': map.get($color-palette, 'green-100'),
    '--cm-on-surface-highlight': map.get($color-palette, 'green-100'),
    // border
    '--cm-border-low': map.get($color-palette, 'green-400'),
    '--cm-border': map.get($color-palette, 'green-500'),
  ),
  'purple': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'purple-50') 40%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'warm-grey-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'purple-100'),
    '--cm-surface-low-1': map.get($color-palette, 'purple-200'),
    '--cm-surface-low-2': map.get($color-palette, 'purple-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'purple-300'),
    '--cm-surface-medium-1': map.get($color-palette, 'purple-300'),
    '--cm-surface-0': map.get($color-palette, 'purple-500'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'purple-500'),
    '--cm-surface-0-text-media': map.get($color-palette, 'purple-500'),
    '--cm-surface-variant-1': map.get($color-palette, 'blue-navy-700'),
    '--cm-surface-variant-2': map.get($color-palette, 'blue-navy-700'),
    // on surface
    '--cm-on-surface-add-to-calendar': #fff,
    '--cm-on-surface-text-media': #fff,
    '--cm-on-surface-swap-0': #fff,
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'purple-700'),
    '--cm-on-surface-1': map.get($color-palette, 'purple-500'),
    '--cm-on-surface-2': map.get($color-palette, 'green-lemon-500'),
    '--cm-on-surface-3': map.get($color-palette, 'purple-500'),
    '--cm-on-surface-highlight': color-mix(
        in srgb,
        map.get($color-palette, 'purple-100') 60%,
        transparent
      ),
    // border
    '--cm-border-low': map.get($color-palette, 'purple-200'),
    '--cm-border': map.get($color-palette, 'purple-500'),
  ),
  'blue-navy': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'blue-navy-100') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'blue-ocean-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'blue-navy-100'),
    '--cm-surface-low-1': map.get($color-palette, 'blue-navy-300'),
    '--cm-surface-low-2': map.get($color-palette, 'blue-navy-200'),
    '--cm-surface-medium-0': map.get($color-palette, 'blue-navy-400'),
    '--cm-surface-medium-1': map.get($color-palette, 'blue-navy-400'),
    '--cm-surface-0': map.get($color-palette, 'blue-navy-800'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'blue-navy-800'),
    '--cm-surface-0-text-media': map.get($color-palette, 'blue-navy-800'),
    '--cm-surface-variant-1': map.get($color-palette, 'blue-ocean-400'),
    '--cm-surface-variant-2': map.get($color-palette, 'blue-navy-800'),
    // on surface
    '--cm-on-surface-add-to-calendar': #fff,
    '--cm-on-surface-text-media': #fff,
    '--cm-on-surface-swap-0': #fff,
    '--cm-on-surface-swap-1': var(--c-g-950),
    '--cm-on-surface': map.get($color-palette, 'blue-navy-800'),
    '--cm-on-surface-1': map.get($color-palette, 'blue-navy-700'),
    '--cm-on-surface-2': map.get($color-palette, 'blue-ocean-400'),
    '--cm-on-surface-3': map.get($color-palette, 'blue-navy-700'),
    '--cm-on-surface-highlight': color-mix(
        in srgb,
        map.get($color-palette, 'blue-navy-200') 60%,
        transparent
      ),
    // border
    '--cm-border-low': map.get($color-palette, 'blue-navy-200'),
    '--cm-border': map.get($color-palette, 'blue-navy-800'),
  ),
  'blue-electric': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'blue-electric-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'warm-grey-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'blue-electric-100'),
    '--cm-surface-low-1': map.get($color-palette, 'blue-electric-200'),
    '--cm-surface-low-2': map.get($color-palette, 'blue-electric-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'blue-electric-300'),
    '--cm-surface-medium-1': map.get($color-palette, 'blue-electric-400'),
    '--cm-surface-0': map.get($color-palette, 'blue-electric-400'),
    '--cm-surface-0-add-to-calendar': map.get(
        $color-palette,
        'blue-electric-400'
      ),
    '--cm-surface-0-text-media': map.get($color-palette, 'blue-electric-400'),
    '--cm-surface-variant-1': map.get($color-palette, 'green-pine-700'),
    '--cm-surface-variant-2': map.get($color-palette, 'green-pine-700'),
    // on surface
    '--cm-on-surface-add-to-calendar': var(--c-g-950),
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': var(--c-g-950),
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'blue-electric-700'),
    '--cm-on-surface-1': map.get($color-palette, 'blue-electric-400'),
    '--cm-on-surface-2': map.get($color-palette, 'warm-grey-300'),
    '--cm-on-surface-3': map.get($color-palette, 'blue-electric-400'),
    '--cm-on-surface-highlight': map.get($color-palette, 'blue-electric-100'),
    // border
    '--cm-border-low': map.get($color-palette, 'blue-electric-300'),
    '--cm-border': map.get($color-palette, 'blue-electric-400'),
  ),
  'blue-ocean': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'blue-ocean-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'warm-grey-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'blue-100'),
    '--cm-surface-low-1': map.get($color-palette, 'blue-200'),
    '--cm-surface-low-2': map.get($color-palette, 'blue-ocean-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'blue-ocean-300'),
    '--cm-surface-medium-1': #fff,
    '--cm-surface-0': map.get($color-palette, 'blue-ocean-400'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'blue-ocean-400'),
    '--cm-surface-0-text-media': map.get($color-palette, 'blue-ocean-400'),
    '--cm-surface-variant-1': map.get($color-palette, 'green-pine-800'),
    '--cm-surface-variant-2': map.get($color-palette, 'green-pine-800'),
    // on surface
    '--cm-on-surface-add-to-calendar': var(--c-g-950),
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': var(--c-g-950),
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'blue-ocean-800'),
    '--cm-on-surface-1': map.get($color-palette, 'blue-ocean-400'),
    '--cm-on-surface-2': map.get($color-palette, 'warm-grey-300'),
    '--cm-on-surface-3': map.get($color-palette, 'blue-ocean-400'),
    '--cm-on-surface-highlight': #{map.get($color-palette, 'blue-ocean-100')},

    // border
    '--cm-border-low': map.get($color-palette, 'blue-ocean-300'),
    '--cm-border': map.get($color-palette, 'blue-ocean-400'),
  ),
  'green-lemon': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'green-lemon-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'green-pine-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'green-lemon-200'),
    '--cm-surface-low-1': map.get($color-palette, 'green-lemon-300'),
    '--cm-surface-low-2': map.get($color-palette, 'green-lemon-300'),
    '--cm-surface-medium-0': map.get($color-palette, 'green-lemon-400'),
    '--cm-surface-medium-1': #fff,
    '--cm-surface-0': map.get($color-palette, 'green-lemon-400'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'green-lemon-400'),
    '--cm-surface-0-text-media': map.get($color-palette, 'green-lemon-400'),
    '--cm-surface-variant-1': var(--c-n-900),
    '--cm-surface-variant-2': var(--c-n-900),
    // on surface
    '--cm-on-surface-add-to-calendar': var(--c-g-950),
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': var(--c-g-950),
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'green-lemon-900'),
    '--cm-on-surface-1': map.get($color-palette, 'green-lemon-400'),
    '--cm-on-surface-2': var(--c-n-900),
    '--cm-on-surface-3': map.get($color-palette, 'green-lemon-400'),
    '--cm-on-surface-highlight': #{map.get($color-palette, 'green-lemon-200')},

    // border
    '--cm-border-low': map.get($color-palette, 'green-300'),
    '--cm-border': map.get($color-palette, 'green-lemon-500'),
  ),
  'green-pine': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'green-pine-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'green-lemon-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'green-pine-100'),
    '--cm-surface-low-1': map.get($color-palette, 'green-pine-200'),
    '--cm-surface-low-2': map.get($color-palette, 'green-pine-300'),
    '--cm-surface-medium-0': map.get($color-palette, 'green-pine-300'),
    '--cm-surface-medium-1': #fff,
    '--cm-surface-0': map.get($color-palette, 'green-pine-600'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'green-pine-600'),
    '--cm-surface-0-text-media': map.get($color-palette, 'green-pine-600'),
    '--cm-surface-variant-1': map.get($color-palette, 'purple-violet-200'),
    '--cm-surface-variant-2': map.get($color-palette, 'green-pine-700'),
    // on surface
    '--cm-on-surface-add-to-calendar': #fff,
    '--cm-on-surface-text-media': #fff,
    '--cm-on-surface-swap-0': #fff,
    '--cm-on-surface-swap-1': var(--c-g-950),
    '--cm-on-surface': map.get($color-palette, 'green-pine-600'),
    '--cm-on-surface-1': map.get($color-palette, 'green-pine-600'),
    '--cm-on-surface-2': map.get($color-palette, 'green-lemon-400'),
    '--cm-on-surface-3': map.get($color-palette, 'green-pine-600'),
    '--cm-on-surface-highlight': #{map.get($color-palette, 'green-pine-100')},

    // border
    '--cm-border-low': map.get($color-palette, 'green-pine-200'),
    '--cm-border': map.get($color-palette, 'green-pine-600'),
  ),
  'warm-grey': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'warm-grey-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'blue-electric-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'warm-grey-100'),
    '--cm-surface-low-1': map.get($color-palette, 'warm-grey-200'),
    '--cm-surface-low-2': map.get($color-palette, 'warm-grey-200'),
    '--cm-surface-medium-0': map.get($color-palette, 'warm-grey-300'),
    '--cm-surface-medium-1': #fff,
    '--cm-surface-0': map.get($color-palette, 'warm-grey-300'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'warm-grey-300'),
    '--cm-surface-0-text-media': map.get($color-palette, 'warm-grey-300'),
    '--cm-surface-variant-1': map.get($color-palette, 'green-pine-700'),
    '--cm-surface-variant-2': map.get($color-palette, 'green-pine-700'),
    // on surface
    '--cm-on-surface-add-to-calendar': var(--c-g-950),
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': var(--c-g-950),
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'warm-grey-700'),
    '--cm-on-surface-1': map.get($color-palette, 'warm-grey-400'),
    '--cm-on-surface-2': map.get($color-palette, 'blue-electric-400'),
    '--cm-on-surface-3': map.get($color-palette, 'warm-grey-400'),
    '--cm-on-surface-highlight': color-mix(
        in srgb,
        map.get($color-palette, 'warm-grey-100') 60%,
        transparent
      ),
    // border
    '--cm-border-low': map.get($color-palette, 'warm-grey-200'),
    '--cm-border': map.get($color-palette, 'warm-grey-400'),
  ),
  'red-crayola': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'red-crayola-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': var(--c-p-50),
    '--cm-surface-low-0': map.get($color-palette, 'red-crayola-100'),
    '--cm-surface-low-1': map.get($color-palette, 'red-crayola-200'),
    '--cm-surface-low-2': map.get($color-palette, 'red-crayola-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'red-crayola-300'),
    '--cm-surface-medium-1': #fff,
    '--cm-surface-0': map.get($color-palette, 'red-crayola-500'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'red-crayola-500'),
    '--cm-surface-0-text-media': map.get($color-palette, 'red-crayola-500'),
    '--cm-surface-variant-1': map.get($color-palette, 'blue-navy-900'),
    '--cm-surface-variant-2': map.get($color-palette, 'blue-navy-900'),
    // on surface
    '--cm-on-surface-add-to-calendar': #fff,
    '--cm-on-surface-text-media': #fff,
    '--cm-on-surface-swap-0': #fff,
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'red-crayola-700'),
    '--cm-on-surface-1': map.get($color-palette, 'red-crayola-400'),
    '--cm-on-surface-2': map.get($color-palette, 'blue-navy-900'),
    '--cm-on-surface-3': map.get($color-palette, 'red-crayola-400'),
    '--cm-on-surface-highlight': color-mix(
        in srgb,
        map.get($color-palette, 'red-crayola-100') 60%,
        transparent
      ),
    // border
    '--cm-border-low': map.get($color-palette, 'red-crayola-200'),
    '--cm-border': map.get($color-palette, 'red-crayola-400'),
  ),
  'yellow-gold': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'yellow-gold-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'blue-electric-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'yellow-gold-100'),
    '--cm-surface-low-1': map.get($color-palette, 'yellow-gold-200'),
    '--cm-surface-low-2': map.get($color-palette, 'yellow-gold-200'),
    '--cm-surface-medium-0': map.get($color-palette, 'yellow-gold-300'),
    '--cm-surface-medium-1': #fff,
    '--cm-surface-0': map.get($color-palette, 'yellow-gold-300'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'yellow-gold-300'),
    '--cm-surface-0-text-media': map.get($color-palette, 'yellow-gold-300'),
    '--cm-surface-variant-1': map.get($color-palette, 'green-pine-700'),
    '--cm-surface-variant-2': map.get($color-palette, 'green-pine-700'),
    // on surface
    '--cm-on-surface-add-to-calendar': var(--c-g-950),
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': var(--c-g-950),
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'yellow-gold-800'),
    '--cm-on-surface-1': map.get($color-palette, 'yellow-gold-300'),
    '--cm-on-surface-2': map.get($color-palette, 'blue-electric-500'),
    '--cm-on-surface-3': map.get($color-palette, 'yellow-gold-300'),
    '--cm-on-surface-highlight': #{map.get($color-palette, 'yellow-gold-100')},

    // border
    '--cm-border-low': map.get($color-palette, 'yellow-gold-300'),
    '--cm-border': map.get($color-palette, 'yellow-gold-400'),
  ),
  'purple-violet': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'purple-violet-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'green-lemon-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'purple-100'),
    '--cm-surface-low-1': map.get($color-palette, 'purple-violet-200'),
    '--cm-surface-low-2': map.get($color-palette, 'purple-violet-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'purple-300'),
    '--cm-surface-medium-1': #fff,
    '--cm-surface-0': map.get($color-palette, 'purple-violet-300'),
    '--cm-surface-0-add-to-calendar': map.get(
        $color-palette,
        'purple-violet-300'
      ),
    '--cm-surface-0-text-media': map.get($color-palette, 'purple-violet-300'),
    '--cm-surface-variant-1': map.get($color-palette, 'blue-navy-800'),
    '--cm-surface-variant-2': map.get($color-palette, 'blue-navy-800'),
    // on surface
    '--cm-on-surface-add-to-calendar': var(--c-g-950),
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': var(--c-g-950),
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'purple-violet-700'),
    '--cm-on-surface-1': map.get($color-palette, 'purple-violet-300'),
    '--cm-on-surface-2': map.get($color-palette, 'blue-navy-800'),
    '--cm-on-surface-3': map.get($color-palette, 'purple-violet-300'),
    '--cm-on-surface-highlight': color-mix(
        in srgb,
        map.get($color-palette, 'purple-violet-100') 60%,
        transparent
      ),
    // border
    '--cm-border-low': map.get($color-palette, 'purple-violet-200'),
    '--cm-border': map.get($color-palette, 'purple-violet-300'),
  ),
  'red-tomato': (
    // surface
    '--cm-surface-lowest': color-mix(
        in srgb,
        map.get($color-palette, 'red-tomato-50') 50%,
        transparent
      ),
    '--cm-surface-lowest-variant': color-mix(
        in srgb,
        map.get($color-palette, 'blue-ocean-50') 50%,
        transparent
      ),
    '--cm-surface-low-0': map.get($color-palette, 'red-tomato-100'),
    '--cm-surface-low-1': map.get($color-palette, 'red-tomato-200'),
    '--cm-surface-low-2': map.get($color-palette, 'red-tomato-100'),
    '--cm-surface-medium-0': map.get($color-palette, 'red-tomato-300'),
    '--cm-surface-medium-1': #fff,
    '--cm-surface-0': map.get($color-palette, 'red-tomato-500'),
    '--cm-surface-0-add-to-calendar': map.get($color-palette, 'red-tomato-500'),
    '--cm-surface-0-text-media': map.get($color-palette, 'red-tomato-500'),
    '--cm-surface-variant-1': map.get($color-palette, 'green-pine-700'),
    '--cm-surface-variant-2': map.get($color-palette, 'green-pine-700'),
    '--cm-on-surface-add-to-calendar': var(--c-g-950),
    // on-surface
    '--cm-on-surface-text-media': var(--c-g-950),
    '--cm-on-surface-swap-0': var(--c-g-950),
    '--cm-on-surface-swap-1': #fff,
    '--cm-on-surface': map.get($color-palette, 'red-tomato-700'),
    '--cm-on-surface-1': map.get($color-palette, 'red-tomato-500'),
    '--cm-on-surface-2': map.get($color-palette, 'blue-ocean-300'),
    '--cm-on-surface-3': map.get($color-palette, 'red-tomato-500'),
    '--cm-on-surface-highlight': color-mix(
        in srgb,
        map.get($color-palette, 'red-tomato-100') 60%,
        transparent
      ),
    // border
    '--cm-border-low': map.get($color-palette, 'red-tomato-200'),
    '--cm-border': map.get($color-palette, 'red-tomato-500'),
  ),
) !default;