@layer compound.custom {
  [class*="cpd-theme-light"] {
    --cpd-color-accent-100: #fbfbfd;
    --cpd-color-accent-200: #f6f7fc;
    --cpd-color-accent-300: #f1f1f9;
    --cpd-color-accent-400: #e2e4f4;
    --cpd-color-accent-500: #cfd1ec;
    --cpd-color-accent-600: #bfc1e5;
    --cpd-color-accent-700: #a7a9d9;
    --cpd-color-accent-800: #8282c7;
    --cpd-color-accent-900: #6562b6;
    --cpd-color-accent-1000: #5852ae;
    --cpd-color-accent-1100: #4c41a5;
    --cpd-color-accent-1200: #3d2a9a;
    --cpd-color-accent-1300: #30068b;
    --cpd-color-accent-1400: #1d0068;
    --cpd-color-alpha-accent-100: #36369B05;
    --cpd-color-alpha-accent-200: #1E37B30A;
    --cpd-color-alpha-accent-300: #16169C0F;
    --cpd-color-alpha-accent-400: #0D1FA51F;
    --cpd-color-alpha-accent-500: #020C9D30;
    --cpd-color-alpha-accent-600: #09109A42;
    --cpd-color-alpha-accent-700: #04089059;
    --cpd-color-alpha-accent-800: #05058F80;
    --cpd-color-alpha-accent-900: #0702889E;
    --cpd-color-alpha-accent-1000: #0A0189AD;
    --cpd-color-alpha-accent-1100: #0F0288BF;
    --cpd-color-alpha-accent-1200: #170189D6;
    --cpd-color-alpha-accent-1300: #2C0189FA;
    --cpd-color-alpha-accent-1400: #1D0066FF;
  }

  [class*="cpd-theme-dark"] {
    --cpd-color-accent-100: #160055;
    --cpd-color-accent-200: #18005b;
    --cpd-color-accent-300: #20006b;
    --cpd-color-accent-400: #2b007f;
    --cpd-color-accent-500: #35198f;
    --cpd-color-accent-600: #3d2a96;
    --cpd-color-accent-700: #4b40a1;
    --cpd-color-accent-800: #6562b3;
    --cpd-color-accent-900: #8182c4;
    --cpd-color-accent-1000: #9294cd;
    --cpd-color-accent-1100: #a5a6d7;
    --cpd-color-accent-1200: #bec0e3;
    --cpd-color-accent-1300: #dbdcf0;
    --cpd-color-accent-1400: #ededf7;
    --cpd-color-alpha-accent-100: #170057FF;
    --cpd-color-alpha-accent-200: #18005CFF;
    --cpd-color-alpha-accent-300: #20006BFF;
    --cpd-color-alpha-accent-400: #2A0080FF;
    --cpd-color-alpha-accent-500: #5720FE85;
    --cpd-color-alpha-accent-600: #653EFE8C;
    --cpd-color-alpha-accent-700: #735DFD99;
    --cpd-color-alpha-accent-800: #8D88FCAD;
    --cpd-color-alpha-accent-900: #A9A9FEBF;
    --cpd-color-alpha-accent-1000: #B4B6FDC9;
    --cpd-color-alpha-accent-1100: #C3C3FED4;
    --cpd-color-alpha-accent-1200: #D6D8FFE0;
    --cpd-color-alpha-accent-1300: #E7E8FEF0;
    --cpd-color-alpha-accent-1400: #F6F6FEF7;
  }

  [class*="cpd-theme-light-hc"] {
    --cpd-color-accent-100: #f6f7fc;
    --cpd-color-accent-200: #f1f1f9;
    --cpd-color-accent-300: #e2e4f4;
    --cpd-color-accent-400: #dadbf0;
    --cpd-color-accent-500: #bfc1e5;
    --cpd-color-accent-600: #a7a9d9;
    --cpd-color-accent-700: #8888ca;
    --cpd-color-accent-800: #6c6aba;
    --cpd-color-accent-900: #4639a1;
    --cpd-color-accent-1000: #402f9c;
    --cpd-color-accent-1100: #381e95;
    --cpd-color-accent-1200: #320d8e;
    --cpd-color-accent-1300: #220072;
    --cpd-color-accent-1400: #1c0064;
    --cpd-color-alpha-accent-100: #1E37B30A;
    --cpd-color-alpha-accent-200: #16169C0F;
    --cpd-color-alpha-accent-300: #0D1FA51F;
    --cpd-color-alpha-accent-400: #08109B26;
    --cpd-color-alpha-accent-500: #09109A42;
    --cpd-color-alpha-accent-600: #04089059;
    --cpd-color-alpha-accent-700: #02028D78;
    --cpd-color-alpha-accent-800: #07028D96;
    --cpd-color-alpha-accent-900: #130189C7;
    --cpd-color-alpha-accent-1000: #150189D1;
    --cpd-color-alpha-accent-1100: #1F0288E3;
    --cpd-color-alpha-accent-1200: #27008AF2;
    --cpd-color-alpha-accent-1300: #220070FF;
    --cpd-color-alpha-accent-1400: #1D0066FF;
  }

  [class*="cpd-theme-dark-hc"] {
    --cpd-color-accent-100: #18005b;
    --cpd-color-accent-200: #20006b;
    --cpd-color-accent-300: #2b007f;
    --cpd-color-accent-400: #310f89;
    --cpd-color-accent-500: #3d2a96;
    --cpd-color-accent-600: #4b40a1;
    --cpd-color-accent-700: #605cb0;
    --cpd-color-accent-800: #7a7ac0;
    --cpd-color-accent-900: #aeafdb;
    --cpd-color-accent-1000: #babbe1;
    --cpd-color-accent-1100: #cacbe8;
    --cpd-color-accent-1200: #d7d8ee;
    --cpd-color-accent-1300: #ededf7;
    --cpd-color-accent-1400: #f4f4fb;
    --cpd-color-alpha-accent-100: #18005CFF;
    --cpd-color-alpha-accent-200: #20006BFF;
    --cpd-color-alpha-accent-300: #2A0080FF;
    --cpd-color-alpha-accent-400: #5209FB80;
    --cpd-color-alpha-accent-500: #653EFE8C;
    --cpd-color-alpha-accent-600: #735DFD99;
    --cpd-color-alpha-accent-700: #8B85FFA8;
    --cpd-color-alpha-accent-800: #A09EFFBA;
    --cpd-color-alpha-accent-900: #C8C9FED9;
    --cpd-color-alpha-accent-1000: #D3D4FDE0;
    --cpd-color-alpha-accent-1100: #DDDEFDE8;
    --cpd-color-alpha-accent-1200: #E7E7FEED;
    --cpd-color-alpha-accent-1300: #F6F6FEF7;
    --cpd-color-alpha-accent-1400: #F7F7FDFC;
  }

  :root,
  [class*="cpd-theme-"] {
    --cpd-color-text-action-accent: var(--cpd-color-accent-900);
    --cpd-color-text-badge-accent: var(--cpd-color-accent-1100);
    --cpd-color-bg-accent-rest: var(--cpd-color-accent-900);
    --cpd-color-bg-accent-hovered: var(--cpd-color-accent-1000);
    --cpd-color-bg-accent-pressed: var(--cpd-color-accent-1100);
    --cpd-color-bg-accent-selected: var(--cpd-color-alpha-accent-300);
    --cpd-color-bg-accent-subtle: var(--cpd-color-accent-200);
    --cpd-color-bg-badge-accent: var(--cpd-color-accent-400);
    --cpd-color-border-accent-subtle: var(--cpd-color-accent-700);
    --cpd-color-border-accent-primary: var(--cpd-color-accent-900);
    --cpd-color-icon-accent-tertiary: var(--cpd-color-accent-800);
    --cpd-color-icon-accent-primary: var(--cpd-color-accent-900);
    --cpd-color-gradient-subtle-stop1: var(--cpd-color-alpha-accent-500);
    --cpd-color-gradient-subtle-stop2: var(--cpd-color-alpha-accent-400);
    --cpd-color-gradient-subtle-stop3: var(--cpd-color-alpha-accent-300);
    --cpd-color-gradient-subtle-stop4: var(--cpd-color-alpha-accent-200);
    --cpd-color-gradient-subtle-stop5: var(--cpd-color-alpha-accent-100);
  }
}