:root {
  /* Gray */
  --epic-color-gray-flat-base: var(--epic-color-gray-500);
  --epic-color-gray-flat-light: var(--epic-color-gray-400);
  --epic-color-gray-flat-hover: var(--epic-color-gray-600);
  --epic-color-gray-flat-disabled: color-mix(in srgb, var(--epic-color-gray-500) 30%, transparent);
  --epic-color-gray-flat-disabled-strong: color-mix(in srgb, var(--epic-color-gray-500) 30%, transparent);
  --epic-color-gray-flat-pin: color-mix(in srgb, var(--epic-color-gray-500) 65%, transparent);
  --epic-color-gray-flat-soft: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);
  --epic-color-gray-flat-soft-hover: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-color-gray-flat-soft-transparent: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-color-gray-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-gray-500) 5%, transparent);
  --epic-color-gray-flat-thumbnail: var(--epic-color-gray-25);

  --epic-color-gray-font-base: var(--epic-color-gray-600);
  --epic-color-gray-font-soft-base: var(--epic-color-gray-700);
  --epic-color-gray-font-hover: var(--epic-color-gray-800);
  --epic-color-gray-font-inverse: var(--epic-color-gray-600);

  /* Black */
  --epic-color-black-flat-base: var(--epic-color-gray-950);
  --epic-color-black-flat-light: var(--epic-color-gray-700);
  --epic-color-black-flat-hover: var(--epic-color-gray-875);
  --epic-color-black-flat-line-hover: var(--epic-color-gray-600);
  --epic-color-black-flat-disabled: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-color-black-flat-soft: color-mix(in srgb, var(--epic-color-black) 10%, transparent);
  --epic-color-black-flat-soft-hover: color-mix(in srgb, var(--epic-color-black) 15%, transparent);
  --epic-color-black-flat-soft-transparent: color-mix(in srgb, var(--epic-color-black) 5%, transparent);

  --epic-color-black-font-base: var(--epic-color-gray-950);
  --epic-color-black-font-hover: var(--epic-color-gray-100);
  --epic-color-black-font-hover-strong: var(--epic-color-gray-700);
  --epic-color-black-font-disabled: color-mix(in srgb, var(--epic-color-white) 55%, transparent);
  --epic-color-black-font-inverse: var(--epic-color-white);
  --epic-color-black-font-inverse-hover: color-mix(in srgb, var(--epic-color-white) 80%, transparent);

  /* White */
  --epic-color-white-flat-base: var(--epic-color-white);
  --epic-color-white-flat-light: var(--epic-color-gray-50);
  --epic-color-white-flat-hover: var(--epic-color-gray-875);
  --epic-color-white-flat-line-hover: var(--epic-color-gray-100);
  --epic-color-white-flat-disabled: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
  --epic-color-white-flat-disabled-strong: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
  --epic-color-white-flat-soft: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-color-white-flat-soft-hover: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-color-white-flat-soft-transparent: color-mix(in srgb, var(--epic-color-white) 5%, transparent);

  --epic-color-white-font-base: var(--epic-color-white);
  --epic-color-white-font-hover: var(--epic-color-gray-875);
  --epic-color-white-font-hover-strong: var(--epic-color-gray-50);
  --epic-color-white-font-disabled: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
  --epic-color-white-font-disabled-strong: color-mix(in srgb, var(--epic-color-gray-950) 55%, transparent);
  --epic-color-white-font-inverse: var(--epic-color-gray-950);

  /* Brand */
  --epic-color-brand-flat-base: var(--epic-color-blue-500);
  --epic-color-brand-flat-logo: var(--epic-color-blue-500);
  --epic-color-brand-flat-light: var(--epic-color-blue-400);
  --epic-color-brand-flat-hover: var(--epic-color-blue-600);
  --epic-color-brand-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 30%, transparent);
  --epic-color-brand-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 10%, transparent);
  --epic-color-brand-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
  --epic-color-brand-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 5%, transparent);
  --epic-color-brand-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 3%, transparent);
  --epic-color-brand-flat-icon-duotone: color-mix(in srgb, var(--epic-color-blue-500) 35%, transparent);

  --epic-color-brand-font-base: var(--epic-color-blue-500);
  --epic-color-brand-font-soft-base: var(--epic-color-blue-600);
  --epic-color-brand-font-hover: var(--epic-color-blue-800);
  --epic-color-brand-font-inverse: var(--epic-color-blue-500);

  /* Blue */
  --epic-color-blue-flat-base: var(--epic-color-blue-500);
  --epic-color-blue-flat-light: var(--epic-color-blue-400);
  --epic-color-blue-flat-hover: var(--epic-color-blue-600);
  --epic-color-blue-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 30%, transparent);
  --epic-color-blue-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 10%, transparent);
  --epic-color-blue-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
  --epic-color-blue-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 5%, transparent);
  --epic-color-blue-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 3%, transparent);

  --epic-color-blue-font-base: var(--epic-color-blue-500);
  --epic-color-blue-font-soft: var(--epic-color-blue-600);
  --epic-color-blue-font-hover: var(--epic-color-blue-600);
  --epic-color-blue-font-inverse: var(--epic-color-blue-500);

  /* Green */
  --epic-color-green-flat-base: var(--epic-color-green-500);
  --epic-color-green-flat-light: var(--epic-color-green-400);
  --epic-color-green-flat-hover: #66cc00;
  --epic-color-green-flat-disabled: color-mix(in srgb, var(--epic-color-green-500) 30%, transparent);
  --epic-color-green-flat-soft: color-mix(in srgb, var(--epic-color-green-500) 20%, transparent);
  --epic-color-green-flat-soft-hover: color-mix(in srgb, var(--epic-color-green-500) 30%, transparent);
  --epic-color-green-flat-soft-transparent: color-mix(in srgb, var(--epic-color-green-500) 5%, transparent);
  --epic-color-green-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-green-500) 3%, transparent);

  --epic-color-green-font-base: var(--epic-color-green-700);
  --epic-color-green-font-soft-base: var(--epic-color-green-800);
  --epic-color-green-font-hover: var(--epic-color-green-900);
  --epic-color-green-font-inverse: var(--epic-color-green-700);

  /* Forest */
  --epic-color-forest-flat-base: var(--epic-color-forest-500);
  --epic-color-forest-flat-light: var(--epic-color-forest-400);
  --epic-color-forest-flat-hover: var(--epic-color-forest-600);
  --epic-color-forest-flat-disabled: color-mix(in srgb, var(--epic-color-forest-500) 30%, transparent);
  --epic-color-forest-flat-disabled-strong: color-mix(in srgb, var(--epic-color-forest-500) 30%, transparent);
  --epic-color-forest-flat-soft: color-mix(in srgb, var(--epic-color-forest-500) 15%, transparent);
  --epic-color-forest-flat-soft-hover: color-mix(in srgb, var(--epic-color-forest-500) 25%, transparent);
  --epic-color-forest-flat-soft-transparent: color-mix(in srgb, var(--epic-color-forest-500) 5%, transparent);
  --epic-color-forest-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-forest-500) 3%, transparent);

  --epic-color-forest-font-base: var(--epic-color-forest-500);
  --epic-color-forest-font-soft-base: var(--epic-color-forest-700);
  --epic-color-forest-font-hover: var(--epic-color-forest-800);
  --epic-color-forest-font-inverse: var(--epic-color-forest-500);

  /* Lime */
  --epic-color-lime-flat-base: var(--epic-color-lime-500);
  --epic-color-lime-flat-light: var(--epic-color-lime-400);
  --epic-color-lime-flat-hover: var(--epic-color-lime-600);
  --epic-color-lime-flat-disabled: color-mix(in srgb, var(--epic-color-lime-500) 30%, transparent);
  --epic-color-lime-flat-soft: color-mix(in srgb, var(--epic-color-lime-500) 20%, transparent);
  --epic-color-lime-flat-soft-hover: color-mix(in srgb, var(--epic-color-lime-500) 30%, transparent);
  --epic-color-lime-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lime-500) 5%, transparent);
  --epic-color-lime-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-lime-500) 3%, transparent);

  --epic-color-lime-font-base: var(--epic-color-lime-700);
  --epic-color-lime-font-soft-base: var(--epic-color-lime-800);
  --epic-color-lime-font-hover: var(--epic-color-lime-900);
  --epic-color-lime-font-inverse: var(--epic-color-lime-700);

  /* Mint */
  --epic-color-mint-flat-base: var(--epic-color-mint-400);
  --epic-color-mint-flat-light: var(--epic-color-mint-400);
  --epic-color-mint-flat-hover: var(--epic-color-mint-500);
  --epic-color-mint-flat-disabled: color-mix(in srgb, var(--epic-color-mint-500) 30%, transparent);
  --epic-color-mint-flat-soft: color-mix(in srgb, var(--epic-color-mint-500) 15%, transparent);
  --epic-color-mint-flat-soft-hover: color-mix(in srgb, var(--epic-color-mint-500) 25%, transparent);
  --epic-color-mint-flat-soft-transparent: color-mix(in srgb, var(--epic-color-mint-500) 5%, transparent);
  --epic-color-mint-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-mint-500) 3%, transparent);

  --epic-color-mint-font-base: var(--epic-color-mint-700);
  --epic-color-mint-font-soft-base: var(--epic-color-mint-800);
  --epic-color-mint-font-hover: var(--epic-color-mint-900);
  --epic-color-mint-font-inverse: var(--epic-color-mint-700);

  /* Cyan */
  --epic-color-cyan-flat-base: var(--epic-color-cyan-400);
  --epic-color-cyan-flat-light: var(--epic-color-cyan-400);
  --epic-color-cyan-flat-hover: var(--epic-color-cyan-600);
  --epic-color-cyan-flat-disabled: color-mix(in srgb, var(--epic-color-cyan-500) 30%, transparent);
  --epic-color-cyan-flat-soft: color-mix(in srgb, var(--epic-color-cyan-500) 15%, transparent);
  --epic-color-cyan-flat-soft-hover: color-mix(in srgb, var(--epic-color-cyan-500) 25%, transparent);
  --epic-color-cyan-flat-soft-transparent: color-mix(in srgb, var(--epic-color-cyan-500) 5%, transparent);
  --epic-color-cyan-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-cyan-500) 3%, transparent);

  --epic-color-cyan-font-base: var(--epic-color-cyan-700);
  --epic-color-cyan-font-soft-base: var(--epic-color-cyan-800);
  --epic-color-cyan-font-hover: var(--epic-color-cyan-900);
  --epic-color-cyan-font-inverse: var(--epic-color-cyan-700);

  /* Navy */
  --epic-color-navy-flat-base: var(--epic-color-navy-500);
  --epic-color-navy-flat-light: var(--epic-color-navy-400);
  --epic-color-navy-flat-hover: var(--epic-color-navy-600);
  --epic-color-navy-flat-disabled: color-mix(in srgb, var(--epic-color-navy-500) 30%, transparent);
  --epic-color-navy-flat-soft: color-mix(in srgb, var(--epic-color-navy-500) 10%, transparent);
  --epic-color-navy-flat-soft-hover: color-mix(in srgb, var(--epic-color-navy-500) 15%, transparent);
  --epic-color-navy-flat-soft-transparent: color-mix(in srgb, var(--epic-color-navy-500) 5%, transparent);
  --epic-color-navy-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-navy-500) 3%, transparent);

  --epic-color-navy-font-base: var(--epic-color-navy-500);
  --epic-color-navy-font-soft-base: var(--epic-color-navy-700);
  --epic-color-navy-font-hover: var(--epic-color-navy-800);
  --epic-color-navy-font-inverse: var(--epic-color-navy-500);

  /* Indigo */
  --epic-color-indigo-flat-base: var(--epic-color-indigo-500);
  --epic-color-indigo-flat-button-line: var(--epic-color-indigo-500);
  --epic-color-indigo-flat-light: var(--epic-color-indigo-400);
  --epic-color-indigo-flat-hover: var(--epic-color-indigo-600);
  --epic-color-indigo-flat-disabled: color-mix(in srgb, var(--epic-color-indigo-500) 30%, transparent);
  --epic-color-indigo-flat-soft: color-mix(in srgb, var(--epic-color-indigo-500) 10%, transparent);
  --epic-color-indigo-flat-soft-hover: color-mix(in srgb, var(--epic-color-indigo-500) 15%, transparent);
  --epic-color-indigo-flat-soft-transparent: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-color-indigo-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-indigo-500) 3%, transparent);

  --epic-color-indigo-font-base: var(--epic-color-indigo-500);
  --epic-color-indigo-font-soft-base: var(--epic-color-indigo-700);
  --epic-color-indigo-font-hover: var(--epic-color-indigo-900);
  --epic-color-indigo-font-inverse: var(--epic-color-indigo-500);

  /* Purple */
  --epic-color-purple-flat-base: var(--epic-color-purple-500);
  --epic-color-purple-flat-light: var(--epic-color-purple-400);
  --epic-color-purple-flat-hover: var(--epic-color-purple-600);
  --epic-color-purple-flat-disabled: color-mix(in srgb, var(--epic-color-purple-500) 30%, transparent);
  --epic-color-purple-flat-soft: color-mix(in srgb, var(--epic-color-purple-500) 15%, transparent);
  --epic-color-purple-flat-soft-hover: color-mix(in srgb, var(--epic-color-purple-500) 25%, transparent);
  --epic-color-purple-flat-soft-transparent: color-mix(in srgb, var(--epic-color-purple-500) 5%, transparent);

  --epic-color-purple-font-base: var(--epic-color-purple-500);
  --epic-color-purple-font-soft-base: var(--epic-color-purple-700);
  --epic-color-purple-font-hover: var(--epic-color-purple-800);
  --epic-color-purple-font-inverse: var(--epic-color-purple-500);

  /* Lavendar */
  --epic-color-lavendar-flat-base: var(--epic-color-lavender-500);
  --epic-color-lavendar-flat-light: var(--epic-color-lavender-400);
  --epic-color-lavendar-flat-hover: var(--epic-color-lavender-600);
  --epic-color-lavendar-flat-disabled: color-mix(in srgb, var(--epic-color-lavender-500) 30%, transparent);
  --epic-color-lavendar-flat-soft: color-mix(in srgb, var(--epic-color-lavender-500) 10%, transparent);
  --epic-color-lavendar-flat-soft-hover: color-mix(in srgb, var(--epic-color-lavender-500) 15%, transparent);
  --epic-color-lavendar-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lavender-500) 3%, transparent);

  --epic-color-lavendar-font-base: var(--epic-color-lavender-500);
  --epic-color-lavendar-font-soft-base: var(--epic-color-lavender-600);
  --epic-color-lavendar-font-hover: var(--epic-color-lavender-600);
  --epic-color-lavendar-font-inverse: var(--epic-color-lavender-500);

  /* Orange */
  --epic-color-orange-flat-base: var(--epic-color-orange-500);
  --epic-color-orange-flat-light: var(--epic-color-orange-400);
  --epic-color-orange-flat-hover: #f28900;
  --epic-color-orange-flat-disabled: color-mix(in srgb, var(--epic-color-orange-500) 30%, transparent);
  --epic-color-orange-flat-soft: color-mix(in srgb, var(--epic-color-orange-500) 20%, transparent);
  --epic-color-orange-flat-soft-hover: color-mix(in srgb, var(--epic-color-orange-500) 30%, transparent);
  --epic-color-orange-flat-soft-transparent: color-mix(in srgb, var(--epic-color-orange-500) 5%, transparent);
  --epic-color-orange-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-orange-500) 3%, transparent);

  --epic-color-orange-font-base: var(--epic-color-orange-700);
  --epic-color-orange-font-soft-base: var(--epic-color-orange-800);
  --epic-color-orange-font-hover: var(--epic-color-orange-800);
  --epic-color-orange-font-inverse: var(--epic-color-orange-700);

  /* Yellow */
  --epic-color-yellow-flat-base: var(--epic-color-yellow-500);
  --epic-color-yellow-flat-light: var(--epic-color-yellow-400);
  --epic-color-yellow-flat-hover: #f2ba02;
  --epic-color-yellow-flat-disabled: color-mix(in srgb, var(--epic-color-yellow-500) 50%, transparent);
  --epic-color-yellow-flat-soft: color-mix(in srgb, var(--epic-color-yellow-500) 20%, transparent);
  --epic-color-yellow-flat-soft-hover: color-mix(in srgb, var(--epic-color-yellow-500) 30%, transparent);
  --epic-color-yellow-flat-soft-transparent: color-mix(in srgb, var(--epic-color-yellow-500) 7%, transparent);
  --epic-color-yellow-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-yellow-500) 3%, transparent);

  --epic-color-yellow-font-base: var(--epic-color-yellow-700);
  --epic-color-yellow-font-soft-base: var(--epic-color-yellow-800);
  --epic-color-yellow-font-hover: var(--epic-color-yellow-900);
  --epic-color-yellow-font-inverse: var(--epic-color-yellow-700);

  /* Red */
  --epic-color-red-flat-base: var(--epic-color-red-500);
  --epic-color-red-flat-light: var(--epic-color-red-400);
  --epic-color-red-flat-hover: var(--epic-color-red-600);
  --epic-color-red-flat-disabled: color-mix(in srgb, var(--epic-color-red-500) 30%, transparent);
  --epic-color-red-flat-disabled-strong: color-mix(in srgb, var(--epic-color-red-500) 30%, transparent);
  --epic-color-red-flat-soft: color-mix(in srgb, var(--epic-color-red-500) 10%, transparent);
  --epic-color-red-flat-soft-hover: color-mix(in srgb, var(--epic-color-red-500) 15%, transparent);
  --epic-color-red-flat-soft-transparent: color-mix(in srgb, var(--epic-color-red-500) 5%, transparent);
  --epic-color-red-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-red-500) 3%, transparent);

  --epic-color-red-font-base: var(--epic-color-red-500);
  --epic-color-red-font-soft-base: var(--epic-color-red-600);
  --epic-color-red-font-hover: var(--epic-color-red-700);
  --epic-color-red-font-inverse: var(--epic-color-red-500);

  /* Charcoal */
  --epic-color-charcoal-flat-base: var(--epic-color-charcoal-500);
  --epic-color-charcoal-flat-light: var(--epic-color-charcoal-400);
  --epic-color-charcoal-flat-hover: var(--epic-color-charcoal-600);
  --epic-color-charcoal-flat-disabled: color-mix(in srgb, var(--epic-color-charcoal-500) 30%, transparent);
  --epic-color-charcoal-flat-soft: color-mix(in srgb, var(--epic-color-charcoal-500) 15%, transparent);
  --epic-color-charcoal-flat-soft-hover: color-mix(in srgb, var(--epic-color-charcoal-500) 25%, transparent);
  --epic-color-charcoal-flat-soft-transparent: color-mix(in srgb, var(--epic-color-charcoal-500) 10%, transparent);
  --epic-color-charcoal-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-charcoal-500) 7%, transparent);

  --epic-color-charcoal-font-base: var(--epic-color-charcoal-500);
  --epic-color-charcoal-font-soft-base: var(--epic-color-charcoal-700);
  --epic-color-charcoal-font-hover: var(--epic-color-charcoal-800);
  --epic-color-charcoal-font-inverse: var(--epic-color-charcoal-500);
}

@media (prefers-color-scheme: dark) {
  :root {
    --epic-color-gray-flat-base: var(--epic-color-gray-600);
    --epic-color-gray-flat-light: var(--epic-color-gray-500);
    --epic-color-gray-flat-hover: var(--epic-color-gray-700);
    --epic-color-gray-flat-disabled: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
    --epic-color-gray-flat-disabled-strong: color-mix(in srgb, var(--epic-color-gray-500) 50%, transparent);
    --epic-color-gray-flat-soft: color-mix(in srgb, var(--epic-color-gray-500) 35%, transparent);
    --epic-color-gray-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
    --epic-color-gray-flat-thumbnail: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

    --epic-color-gray-font-base: var(--epic-color-gray-400);
    --epic-color-gray-font-soft-base: var(--epic-color-gray-300);
    --epic-color-gray-font-hover: var(--epic-color-gray-600);
    --epic-color-gray-font-inverse: var(--epic-color-white);

    --epic-color-black-flat-base: var(--epic-color-white);
    --epic-color-black-flat-light: var(--epic-color-gray-25);
    --epic-color-black-flat-hover: var(--epic-color-gray-50);
    --epic-color-black-flat-line-hover: var(--epic-color-gray-500);
    --epic-color-black-flat-disabled: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
    --epic-color-black-flat-soft: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
    --epic-color-black-flat-soft-hover: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
    --epic-color-black-flat-soft-transparent: color-mix(in srgb, var(--epic-color-white) 5%, transparent);

    --epic-color-black-font-base: var(--epic-color-white);
    --epic-color-black-font-hover: var(--epic-color-gray-750);
    --epic-color-black-font-hover-strong: var(--epic-color-gray-400);
    --epic-color-black-font-disabled: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
    --epic-color-black-font-inverse: var(--epic-color-gray-950);
    --epic-color-black-font-inverse-hover: var(--epic-color-gray-700);

    --epic-color-white-flat-base: var(--epic-color-gray-950);
    --epic-color-white-flat-light: var(--epic-color-gray-800);
    --epic-color-white-flat-hover: var(--epic-color-gray-50);
    --epic-color-white-flat-line-hover: var(--epic-color-gray-600);
    --epic-color-white-flat-disabled: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
    --epic-color-white-flat-disabled-strong: color-mix(in srgb, var(--epic-color-gray-950) 20%, transparent);
    --epic-color-white-flat-soft: color-mix(in srgb, var(--epic-color-white) 20%, transparent);

    --epic-color-white-font-hover: var(--epic-color-gray-50);
    --epic-color-white-font-hover-strong: var(--epic-color-gray-400);
    --epic-color-white-font-disabled-strong: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
    --epic-color-white-font-inverse: var(--epic-color-white);

    --epic-color-brand-flat-logo: var(--epic-color-white);
    --epic-color-brand-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 40%, transparent);
    --epic-color-brand-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 35%, transparent);
    --epic-color-brand-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 35%, transparent);
    --epic-color-brand-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
    --epic-color-brand-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
    --epic-color-brand-flat-icon-duotone: color-mix(in srgb, var(--epic-color-blue-500) 75%, transparent);

    --epic-color-brand-font-base: var(--epic-color-blue-300);
    --epic-color-brand-font-soft-base: var(--epic-color-blue-300);
    --epic-color-brand-font-hover: var(--epic-color-blue-500);
    --epic-color-brand-font-inverse: var(--epic-color-white);

    --epic-color-blue-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 40%, transparent);
    --epic-color-blue-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 20%, transparent);
    --epic-color-blue-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 35%, transparent);
    --epic-color-blue-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
    --epic-color-blue-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);

    --epic-color-blue-font-base: var(--epic-color-blue-400);
    --epic-color-blue-font-soft: var(--epic-color-blue-400);
    --epic-color-blue-font-hover: var(--epic-color-blue-500);
    --epic-color-blue-font-inverse: var(--epic-color-white);

    --epic-color-green-flat-disabled: color-mix(in srgb, var(--epic-color-green-500) 40%, transparent);
    --epic-color-green-flat-soft: color-mix(in srgb, var(--epic-color-green-500) 25%, transparent);
    --epic-color-green-flat-soft-hover: color-mix(in srgb, var(--epic-color-green-500) 35%, transparent);
    --epic-color-green-flat-soft-transparent: color-mix(in srgb, var(--epic-color-green-500) 20%, transparent);
    --epic-color-green-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-green-500) 20%, transparent);

    --epic-color-green-font-base: var(--epic-color-green-500);
    --epic-color-green-font-soft-base: var(--epic-color-green-400);
    --epic-color-green-font-hover: var(--epic-color-green-600);
    --epic-color-green-font-inverse: var(--epic-color-green-500);

    --epic-color-forest-flat-disabled: color-mix(in srgb, var(--epic-color-forest-500) 40%, transparent);
    --epic-color-forest-flat-disabled-strong: color-mix(in srgb, var(--epic-color-lime-500) 40%, transparent);
    --epic-color-forest-flat-soft: color-mix(in srgb, var(--epic-color-forest-500) 35%, transparent);
    --epic-color-forest-flat-soft-hover: color-mix(in srgb, var(--epic-color-forest-500) 35%, transparent);
    --epic-color-forest-flat-soft-transparent: color-mix(in srgb, var(--epic-color-forest-500) 15%, transparent);
    --epic-color-forest-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-forest-500) 15%, transparent);

    --epic-color-forest-font-base: var(--epic-color-forest-400);
    --epic-color-forest-font-soft-base: var(--epic-color-forest-300);
    --epic-color-forest-font-hover: var(--epic-color-forest-500);
    --epic-color-forest-font-inverse: var(--epic-color-white);

    --epic-color-lime-flat-disabled: color-mix(in srgb, var(--epic-color-lime-500) 40%, transparent);
    --epic-color-lime-flat-soft: color-mix(in srgb, var(--epic-color-lime-500) 30%, transparent);
    --epic-color-lime-flat-soft-hover: color-mix(in srgb, var(--epic-color-lime-500) 35%, transparent);
    --epic-color-lime-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lime-500) 15%, transparent);
    --epic-color-lime-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-lime-500) 15%, transparent);

    --epic-color-lime-font-base: var(--epic-color-lime-500);
    --epic-color-lime-font-soft-base: var(--epic-color-lime-300);
    --epic-color-lime-font-hover: var(--epic-color-lime-300);
    --epic-color-lime-font-inverse: var(--epic-color-lime-500);

    --epic-color-mint-flat-base: var(--epic-color-mint-500);
    --epic-color-mint-flat-hover: var(--epic-color-mint-600);
    --epic-color-mint-flat-disabled: color-mix(in srgb, var(--epic-color-mint-500) 40%, transparent);
    --epic-color-mint-flat-soft: color-mix(in srgb, var(--epic-color-mint-500) 25%, transparent);
    --epic-color-mint-flat-soft-hover: color-mix(in srgb, var(--epic-color-mint-500) 35%, transparent);
    --epic-color-mint-flat-soft-transparent: color-mix(in srgb, var(--epic-color-mint-500) 15%, transparent);
    --epic-color-mint-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-mint-500) 15%, transparent);

    --epic-color-mint-font-base: var(--epic-color-mint-500);
    --epic-color-mint-font-soft-base: var(--epic-color-mint-500);
    --epic-color-mint-font-hover: var(--epic-color-mint-600);
    --epic-color-mint-font-inverse: var(--epic-color-mint-500);

    --epic-color-cyan-flat-base: var(--epic-color-cyan-500);
    --epic-color-cyan-flat-disabled: color-mix(in srgb, var(--epic-color-cyan-500) 40%, transparent);
    --epic-color-cyan-flat-soft: color-mix(in srgb, var(--epic-color-cyan-500) 30%, transparent);
    --epic-color-cyan-flat-soft-hover: color-mix(in srgb, var(--epic-color-cyan-500) 35%, transparent);
    --epic-color-cyan-flat-soft-transparent: color-mix(in srgb, var(--epic-color-cyan-500) 15%, transparent);
    --epic-color-cyan-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-cyan-500) 15%, transparent);

    --epic-color-cyan-font-base: var(--epic-color-cyan-500);
    --epic-color-cyan-font-soft-base: var(--epic-color-cyan-500);
    --epic-color-cyan-font-hover: var(--epic-color-cyan-600);
    --epic-color-cyan-font-inverse: var(--epic-color-cyan-500);

    --epic-color-navy-flat-disabled: color-mix(in srgb, var(--epic-color-navy-500) 40%, transparent);
    --epic-color-navy-flat-soft: color-mix(in srgb, var(--epic-color-navy-500) 40%, transparent);
    --epic-color-navy-flat-soft-hover: color-mix(in srgb, var(--epic-color-navy-500) 35%, transparent);
    --epic-color-navy-flat-soft-transparent: color-mix(in srgb, var(--epic-color-navy-500) 15%, transparent);
    --epic-color-navy-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-navy-500) 15%, transparent);

    --epic-color-navy-font-base: var(--epic-color-navy-400);
    --epic-color-navy-font-soft-base: var(--epic-color-navy-300);
    --epic-color-navy-font-hover: var(--epic-color-navy-500);
    --epic-color-navy-font-inverse: var(--epic-color-white);

    --epic-color-indigo-flat-button-line: var(--epic-color-indigo-300);
    --epic-color-indigo-flat-hover: var(--epic-color-indigo-400);
    --epic-color-indigo-flat-disabled: color-mix(in srgb, var(--epic-color-indigo-500) 40%, transparent);
    --epic-color-indigo-flat-soft: color-mix(in srgb, var(--epic-color-indigo-500) 40%, transparent);
    --epic-color-indigo-flat-soft-hover: color-mix(in srgb, var(--epic-color-indigo-500) 35%, transparent);
    --epic-color-indigo-flat-soft-transparent: color-mix(in srgb, var(--epic-color-indigo-500) 15%, transparent);
    --epic-color-indigo-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-indigo-500) 15%, transparent);

    --epic-color-indigo-font-base: var(--epic-color-indigo-300);
    --epic-color-indigo-font-soft-base: var(--epic-color-indigo-300);
    --epic-color-indigo-font-hover: var(--epic-color-indigo-200);
    --epic-color-indigo-font-inverse: var(--epic-color-white);

    --epic-color-purple-flat-disabled: color-mix(in srgb, var(--epic-color-purple-500) 40%, transparent);
    --epic-color-purple-flat-soft: color-mix(in srgb, var(--epic-color-purple-500) 30%, transparent);
    --epic-color-purple-flat-soft-hover: color-mix(in srgb, var(--epic-color-purple-500) 35%, transparent);
    --epic-color-purple-flat-soft-transparent: color-mix(in srgb, var(--epic-color-purple-500) 15%, transparent);

    --epic-color-purple-font-base: var(--epic-color-purple-400);
    --epic-color-purple-font-soft-base: var(--epic-color-purple-300);
    --epic-color-purple-font-hover: var(--epic-color-purple-500);
    --epic-color-purple-font-inverse: var(--epic-color-white);

    --epic-color-lavendar-flat-disabled: color-mix(in srgb, var(--epic-color-lavender-500) 40%, transparent);
    --epic-color-lavendar-flat-soft: color-mix(in srgb, var(--epic-color-lavender-500) 35%, transparent);
    --epic-color-lavendar-flat-soft-hover: color-mix(in srgb, var(--epic-color-lavender-500) 25%, transparent);
    --epic-color-lavendar-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lavender-500) 15%, transparent);

    --epic-color-lavendar-font-base: var(--epic-color-lavender-400);
    --epic-color-lavendar-font-soft-base: var(--epic-color-lavender-300);
    --epic-color-lavendar-font-hover: var(--epic-color-lavender-500);
    --epic-color-lavendar-font-inverse: var(--epic-color-white);

    --epic-color-orange-flat-disabled: color-mix(in srgb, var(--epic-color-orange-500) 40%, transparent);
    --epic-color-orange-flat-soft: color-mix(in srgb, var(--epic-color-orange-500) 30%, transparent);
    --epic-color-orange-flat-soft-hover: color-mix(in srgb, var(--epic-color-orange-500) 35%, transparent);
    --epic-color-orange-flat-soft-transparent: color-mix(in srgb, var(--epic-color-orange-500) 15%, transparent);
    --epic-color-orange-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-orange-500) 15%, transparent);

    --epic-color-orange-font-base: var(--epic-color-orange-500);
    --epic-color-orange-font-soft-base: var(--epic-color-orange-500);
    --epic-color-orange-font-hover: var(--epic-color-orange-600);
    --epic-color-orange-font-inverse: var(--epic-color-orange-500);

    --epic-color-yellow-flat-disabled: color-mix(in srgb, var(--epic-color-yellow-500) 25%, transparent);
    --epic-color-yellow-flat-soft: color-mix(in srgb, var(--epic-color-yellow-500) 25%, transparent);
    --epic-color-yellow-flat-soft-hover: color-mix(in srgb, var(--epic-color-yellow-500) 35%, transparent);
    --epic-color-yellow-flat-soft-transparent: color-mix(in srgb, var(--epic-color-yellow-500) 10%, transparent);
    --epic-color-yellow-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-yellow-500) 10%, transparent);

    --epic-color-yellow-font-base: var(--epic-color-yellow-500);
    --epic-color-yellow-font-soft-base: var(--epic-color-yellow-400);
    --epic-color-yellow-font-hover: var(--epic-color-yellow-600);
    --epic-color-yellow-font-inverse: var(--epic-color-yellow-500);

    --epic-color-red-flat-disabled: color-mix(in srgb, var(--epic-color-red-500) 40%, transparent);
    --epic-color-red-flat-disabled-strong: color-mix(in srgb, var(--epic-color-red-500) 50%, transparent);
    --epic-color-red-flat-soft: color-mix(in srgb, var(--epic-color-red-500) 30%, transparent);
    --epic-color-red-flat-soft-hover: color-mix(in srgb, var(--epic-color-red-500) 35%, transparent);
    --epic-color-red-flat-soft-transparent: color-mix(in srgb, var(--epic-color-red-500) 15%, transparent);
    --epic-color-red-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-red-500) 15%, transparent);

    --epic-color-red-font-base: var(--epic-color-red-400);
    --epic-color-red-font-soft-base: var(--epic-color-red-300);
    --epic-color-red-font-hover: var(--epic-color-red-500);
    --epic-color-red-font-inverse: var(--epic-color-white);

    --epic-color-charcoal-flat-base: var(--epic-color-charcoal-600);
    --epic-color-charcoal-flat-hover: var(--epic-color-charcoal-700);
    --epic-color-charcoal-flat-disabled: color-mix(in srgb, var(--epic-color-charcoal-500) 40%, transparent);
    --epic-color-charcoal-flat-soft: color-mix(in srgb, var(--epic-color-charcoal-500) 35%, transparent);
    --epic-color-charcoal-flat-soft-hover: color-mix(in srgb, var(--epic-color-charcoal-500) 40%, transparent);
    --epic-color-charcoal-flat-soft-transparent: color-mix(in srgb, var(--epic-color-charcoal-500) 10%, transparent);
    --epic-color-charcoal-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-charcoal-500) 10%, transparent);

    --epic-color-charcoal-font-base: var(--epic-color-charcoal-400);
    --epic-color-charcoal-font-soft-base: var(--epic-color-charcoal-300);
    --epic-color-charcoal-font-hover: var(--epic-color-charcoal-500);
    --epic-color-charcoal-font-inverse: var(--epic-color-white);
  }
}

.semtle-light {
  --epic-color-gray-flat-base: var(--epic-color-gray-500);
  --epic-color-gray-flat-light: var(--epic-color-gray-400);
  --epic-color-gray-flat-hover: var(--epic-color-gray-600);
  --epic-color-gray-flat-disabled: color-mix(in srgb, var(--epic-color-gray-500) 30%, transparent);
  --epic-color-gray-flat-disabled-strong: color-mix(in srgb, var(--epic-color-gray-500) 30%, transparent);
  --epic-color-gray-flat-pin: color-mix(in srgb, var(--epic-color-gray-500) 65%, transparent);
  --epic-color-gray-flat-soft: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);
  --epic-color-gray-flat-soft-hover: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-color-gray-flat-soft-transparent: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-color-gray-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-gray-500) 5%, transparent);
  --epic-color-gray-flat-thumbnail: var(--epic-color-gray-25);

  --epic-color-gray-font-base: var(--epic-color-gray-600);
  --epic-color-gray-font-soft-base: var(--epic-color-gray-700);
  --epic-color-gray-font-hover: var(--epic-color-gray-800);
  --epic-color-gray-font-inverse: var(--epic-color-gray-600);

  --epic-color-black-flat-base: var(--epic-color-gray-950);
  --epic-color-black-flat-light: var(--epic-color-gray-700);
  --epic-color-black-flat-hover: var(--epic-color-gray-875);
  --epic-color-black-flat-line-hover: var(--epic-color-gray-600);
  --epic-color-black-flat-disabled: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-color-black-flat-soft: color-mix(in srgb, var(--epic-color-black) 10%, transparent);
  --epic-color-black-flat-soft-hover: color-mix(in srgb, var(--epic-color-black) 15%, transparent);
  --epic-color-black-flat-soft-transparent: color-mix(in srgb, var(--epic-color-black) 5%, transparent);

  --epic-color-black-font-base: var(--epic-color-gray-950);
  --epic-color-black-font-hover: var(--epic-color-gray-100);
  --epic-color-black-font-hover-strong: var(--epic-color-gray-700);
  --epic-color-black-font-disabled: color-mix(in srgb, var(--epic-color-white) 55%, transparent);
  --epic-color-black-font-inverse: var(--epic-color-white);
  --epic-color-black-font-inverse-hover: color-mix(in srgb, var(--epic-color-white) 80%, transparent);

  --epic-color-white-flat-base: var(--epic-color-white);
  --epic-color-white-flat-light: var(--epic-color-gray-50);
  --epic-color-white-flat-hover: var(--epic-color-gray-875);
  --epic-color-white-flat-line-hover: var(--epic-color-gray-100);
  --epic-color-white-flat-disabled: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
  --epic-color-white-flat-disabled-strong: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
  --epic-color-white-flat-soft: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-color-white-flat-soft-hover: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-color-white-flat-soft-transparent: color-mix(in srgb, var(--epic-color-white) 5%, transparent);

  --epic-color-white-font-base: var(--epic-color-white);
  --epic-color-white-font-hover: var(--epic-color-gray-875);
  --epic-color-white-font-hover-strong: var(--epic-color-gray-50);
  --epic-color-white-font-disabled: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
  --epic-color-white-font-disabled-strong: color-mix(in srgb, var(--epic-color-gray-950) 55%, transparent);
  --epic-color-white-font-inverse: var(--epic-color-gray-950);

  --epic-color-brand-flat-base: var(--epic-color-blue-500);
  --epic-color-brand-flat-logo: var(--epic-color-blue-500);
  --epic-color-brand-flat-light: var(--epic-color-blue-400);
  --epic-color-brand-flat-hover: var(--epic-color-blue-600);
  --epic-color-brand-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 30%, transparent);
  --epic-color-brand-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 10%, transparent);
  --epic-color-brand-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
  --epic-color-brand-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 5%, transparent);
  --epic-color-brand-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 3%, transparent);
  --epic-color-brand-flat-icon-duotone: color-mix(in srgb, var(--epic-color-blue-500) 35%, transparent);

  --epic-color-brand-font-base: var(--epic-color-blue-500);
  --epic-color-brand-font-soft-base: var(--epic-color-blue-600);
  --epic-color-brand-font-hover: var(--epic-color-blue-800);
  --epic-color-brand-font-inverse: var(--epic-color-blue-500);

  --epic-color-blue-flat-base: var(--epic-color-blue-500);
  --epic-color-blue-flat-light: var(--epic-color-blue-400);
  --epic-color-blue-flat-hover: var(--epic-color-blue-600);
  --epic-color-blue-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 30%, transparent);
  --epic-color-blue-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 10%, transparent);
  --epic-color-blue-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
  --epic-color-blue-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 5%, transparent);
  --epic-color-blue-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 3%, transparent);

  --epic-color-blue-font-base: var(--epic-color-blue-500);
  --epic-color-blue-font-soft: var(--epic-color-blue-600);
  --epic-color-blue-font-hover: var(--epic-color-blue-600);
  --epic-color-blue-font-inverse: var(--epic-color-blue-500);

  --epic-color-green-flat-base: var(--epic-color-green-500);
  --epic-color-green-flat-light: var(--epic-color-green-400);
  --epic-color-green-flat-hover: #66cc00;
  --epic-color-green-flat-disabled: color-mix(in srgb, var(--epic-color-green-500) 30%, transparent);
  --epic-color-green-flat-soft: color-mix(in srgb, var(--epic-color-green-500) 20%, transparent);
  --epic-color-green-flat-soft-hover: color-mix(in srgb, var(--epic-color-green-500) 30%, transparent);
  --epic-color-green-flat-soft-transparent: color-mix(in srgb, var(--epic-color-green-500) 5%, transparent);
  --epic-color-green-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-green-500) 3%, transparent);

  --epic-color-green-font-base: var(--epic-color-green-700);
  --epic-color-green-font-soft-base: var(--epic-color-green-800);
  --epic-color-green-font-hover: var(--epic-color-green-900);
  --epic-color-green-font-inverse: var(--epic-color-green-700);

  --epic-color-forest-flat-base: var(--epic-color-forest-500);
  --epic-color-forest-flat-light: var(--epic-color-forest-400);
  --epic-color-forest-flat-hover: var(--epic-color-forest-600);
  --epic-color-forest-flat-disabled: color-mix(in srgb, var(--epic-color-forest-500) 30%, transparent);
  --epic-color-forest-flat-disabled-strong: color-mix(in srgb, var(--epic-color-forest-500) 30%, transparent);
  --epic-color-forest-flat-soft: color-mix(in srgb, var(--epic-color-forest-500) 15%, transparent);
  --epic-color-forest-flat-soft-hover: color-mix(in srgb, var(--epic-color-forest-500) 25%, transparent);
  --epic-color-forest-flat-soft-transparent: color-mix(in srgb, var(--epic-color-forest-500) 5%, transparent);
  --epic-color-forest-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-forest-500) 3%, transparent);

  --epic-color-forest-font-base: var(--epic-color-forest-500);
  --epic-color-forest-font-soft-base: var(--epic-color-forest-700);
  --epic-color-forest-font-hover: var(--epic-color-forest-800);
  --epic-color-forest-font-inverse: var(--epic-color-forest-500);

  --epic-color-lime-flat-base: var(--epic-color-lime-500);
  --epic-color-lime-flat-light: var(--epic-color-lime-400);
  --epic-color-lime-flat-hover: var(--epic-color-lime-600);
  --epic-color-lime-flat-disabled: color-mix(in srgb, var(--epic-color-lime-500) 30%, transparent);
  --epic-color-lime-flat-soft: color-mix(in srgb, var(--epic-color-lime-500) 20%, transparent);
  --epic-color-lime-flat-soft-hover: color-mix(in srgb, var(--epic-color-lime-500) 30%, transparent);
  --epic-color-lime-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lime-500) 5%, transparent);
  --epic-color-lime-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-lime-500) 3%, transparent);

  --epic-color-lime-font-base: var(--epic-color-lime-700);
  --epic-color-lime-font-soft-base: var(--epic-color-lime-800);
  --epic-color-lime-font-hover: var(--epic-color-lime-900);
  --epic-color-lime-font-inverse: var(--epic-color-lime-700);

  --epic-color-mint-flat-base: var(--epic-color-mint-400);
  --epic-color-mint-flat-light: var(--epic-color-mint-400);
  --epic-color-mint-flat-hover: var(--epic-color-mint-500);
  --epic-color-mint-flat-disabled: color-mix(in srgb, var(--epic-color-mint-500) 30%, transparent);
  --epic-color-mint-flat-soft: color-mix(in srgb, var(--epic-color-mint-500) 15%, transparent);
  --epic-color-mint-flat-soft-hover: color-mix(in srgb, var(--epic-color-mint-500) 25%, transparent);
  --epic-color-mint-flat-soft-transparent: color-mix(in srgb, var(--epic-color-mint-500) 5%, transparent);
  --epic-color-mint-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-mint-500) 3%, transparent);

  --epic-color-mint-font-base: var(--epic-color-mint-700);
  --epic-color-mint-font-soft-base: var(--epic-color-mint-800);
  --epic-color-mint-font-hover: var(--epic-color-mint-900);
  --epic-color-mint-font-inverse: var(--epic-color-mint-700);

  --epic-color-cyan-flat-base: var(--epic-color-cyan-400);
  --epic-color-cyan-flat-light: var(--epic-color-cyan-400);
  --epic-color-cyan-flat-hover: var(--epic-color-cyan-600);
  --epic-color-cyan-flat-disabled: color-mix(in srgb, var(--epic-color-cyan-500) 30%, transparent);
  --epic-color-cyan-flat-soft: color-mix(in srgb, var(--epic-color-cyan-500) 15%, transparent);
  --epic-color-cyan-flat-soft-hover: color-mix(in srgb, var(--epic-color-cyan-500) 25%, transparent);
  --epic-color-cyan-flat-soft-transparent: color-mix(in srgb, var(--epic-color-cyan-500) 5%, transparent);
  --epic-color-cyan-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-cyan-500) 3%, transparent);

  --epic-color-cyan-font-base: var(--epic-color-cyan-700);
  --epic-color-cyan-font-soft-base: var(--epic-color-cyan-800);
  --epic-color-cyan-font-hover: var(--epic-color-cyan-900);
  --epic-color-cyan-font-inverse: var(--epic-color-cyan-700);

  --epic-color-navy-flat-base: var(--epic-color-navy-500);
  --epic-color-navy-flat-light: var(--epic-color-navy-400);
  --epic-color-navy-flat-hover: var(--epic-color-navy-600);
  --epic-color-navy-flat-disabled: color-mix(in srgb, var(--epic-color-navy-500) 30%, transparent);
  --epic-color-navy-flat-soft: color-mix(in srgb, var(--epic-color-navy-500) 10%, transparent);
  --epic-color-navy-flat-soft-hover: color-mix(in srgb, var(--epic-color-navy-500) 15%, transparent);
  --epic-color-navy-flat-soft-transparent: color-mix(in srgb, var(--epic-color-navy-500) 5%, transparent);
  --epic-color-navy-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-navy-500) 3%, transparent);

  --epic-color-navy-font-base: var(--epic-color-navy-500);
  --epic-color-navy-font-soft-base: var(--epic-color-navy-700);
  --epic-color-navy-font-hover: var(--epic-color-navy-800);
  --epic-color-navy-font-inverse: var(--epic-color-navy-500);

  --epic-color-indigo-flat-base: var(--epic-color-indigo-500);
  --epic-color-indigo-flat-button-line: var(--epic-color-indigo-500);
  --epic-color-indigo-flat-light: var(--epic-color-indigo-400);
  --epic-color-indigo-flat-hover: var(--epic-color-indigo-600);
  --epic-color-indigo-flat-disabled: color-mix(in srgb, var(--epic-color-indigo-500) 30%, transparent);
  --epic-color-indigo-flat-soft: color-mix(in srgb, var(--epic-color-indigo-500) 10%, transparent);
  --epic-color-indigo-flat-soft-hover: color-mix(in srgb, var(--epic-color-indigo-500) 15%, transparent);
  --epic-color-indigo-flat-soft-transparent: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-color-indigo-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-indigo-500) 3%, transparent);

  --epic-color-indigo-font-base: var(--epic-color-indigo-500);
  --epic-color-indigo-font-soft-base: var(--epic-color-indigo-700);
  --epic-color-indigo-font-hover: var(--epic-color-indigo-900);
  --epic-color-indigo-font-inverse: var(--epic-color-indigo-500);

  --epic-color-purple-flat-base: var(--epic-color-purple-500);
  --epic-color-purple-flat-light: var(--epic-color-purple-400);
  --epic-color-purple-flat-hover: var(--epic-color-purple-600);
  --epic-color-purple-flat-disabled: color-mix(in srgb, var(--epic-color-purple-500) 30%, transparent);
  --epic-color-purple-flat-soft: color-mix(in srgb, var(--epic-color-purple-500) 15%, transparent);
  --epic-color-purple-flat-soft-hover: color-mix(in srgb, var(--epic-color-purple-500) 25%, transparent);
  --epic-color-purple-flat-soft-transparent: color-mix(in srgb, var(--epic-color-purple-500) 5%, transparent);

  --epic-color-purple-font-base: var(--epic-color-purple-500);
  --epic-color-purple-font-soft-base: var(--epic-color-purple-700);
  --epic-color-purple-font-hover: var(--epic-color-purple-800);
  --epic-color-purple-font-inverse: var(--epic-color-purple-500);

  --epic-color-lavendar-flat-base: var(--epic-color-lavender-500);
  --epic-color-lavendar-flat-light: var(--epic-color-lavender-400);
  --epic-color-lavendar-flat-hover: var(--epic-color-lavender-600);
  --epic-color-lavendar-flat-disabled: color-mix(in srgb, var(--epic-color-lavender-500) 30%, transparent);
  --epic-color-lavendar-flat-soft: color-mix(in srgb, var(--epic-color-lavender-500) 10%, transparent);
  --epic-color-lavendar-flat-soft-hover: color-mix(in srgb, var(--epic-color-lavender-500) 15%, transparent);
  --epic-color-lavendar-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lavender-500) 3%, transparent);

  --epic-color-lavendar-font-base: var(--epic-color-lavender-500);
  --epic-color-lavendar-font-soft-base: var(--epic-color-lavender-600);
  --epic-color-lavendar-font-hover: var(--epic-color-lavender-600);
  --epic-color-lavendar-font-inverse: var(--epic-color-lavender-500);

  --epic-color-orange-flat-base: var(--epic-color-orange-500);
  --epic-color-orange-flat-light: var(--epic-color-orange-400);
  --epic-color-orange-flat-hover: #f28900;
  --epic-color-orange-flat-disabled: color-mix(in srgb, var(--epic-color-orange-500) 30%, transparent);
  --epic-color-orange-flat-soft: color-mix(in srgb, var(--epic-color-orange-500) 20%, transparent);
  --epic-color-orange-flat-soft-hover: color-mix(in srgb, var(--epic-color-orange-500) 30%, transparent);
  --epic-color-orange-flat-soft-transparent: color-mix(in srgb, var(--epic-color-orange-500) 5%, transparent);
  --epic-color-orange-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-orange-500) 3%, transparent);

  --epic-color-orange-font-base: var(--epic-color-orange-700);
  --epic-color-orange-font-soft-base: var(--epic-color-orange-800);
  --epic-color-orange-font-hover: var(--epic-color-orange-800);
  --epic-color-orange-font-inverse: var(--epic-color-orange-700);

  --epic-color-yellow-flat-base: var(--epic-color-yellow-500);
  --epic-color-yellow-flat-light: var(--epic-color-yellow-400);
  --epic-color-yellow-flat-hover: #f2ba02;
  --epic-color-yellow-flat-disabled: color-mix(in srgb, var(--epic-color-yellow-500) 50%, transparent);
  --epic-color-yellow-flat-soft: color-mix(in srgb, var(--epic-color-yellow-500) 20%, transparent);
  --epic-color-yellow-flat-soft-hover: color-mix(in srgb, var(--epic-color-yellow-500) 30%, transparent);
  --epic-color-yellow-flat-soft-transparent: color-mix(in srgb, var(--epic-color-yellow-500) 7%, transparent);
  --epic-color-yellow-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-yellow-500) 3%, transparent);

  --epic-color-yellow-font-base: var(--epic-color-yellow-700);
  --epic-color-yellow-font-soft-base: var(--epic-color-yellow-800);
  --epic-color-yellow-font-hover: var(--epic-color-yellow-900);
  --epic-color-yellow-font-inverse: var(--epic-color-yellow-700);

  --epic-color-red-flat-base: var(--epic-color-red-500);
  --epic-color-red-flat-light: var(--epic-color-red-400);
  --epic-color-red-flat-hover: var(--epic-color-red-600);
  --epic-color-red-flat-disabled: color-mix(in srgb, var(--epic-color-red-500) 30%, transparent);
  --epic-color-red-flat-disabled-strong: color-mix(in srgb, var(--epic-color-red-500) 30%, transparent);
  --epic-color-red-flat-soft: color-mix(in srgb, var(--epic-color-red-500) 10%, transparent);
  --epic-color-red-flat-soft-hover: color-mix(in srgb, var(--epic-color-red-500) 15%, transparent);
  --epic-color-red-flat-soft-transparent: color-mix(in srgb, var(--epic-color-red-500) 5%, transparent);
  --epic-color-red-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-red-500) 3%, transparent);

  --epic-color-red-font-base: var(--epic-color-red-500);
  --epic-color-red-font-soft-base: var(--epic-color-red-600);
  --epic-color-red-font-hover: var(--epic-color-red-700);
  --epic-color-red-font-inverse: var(--epic-color-red-500);

  --epic-color-charcoal-flat-base: var(--epic-color-charcoal-500);
  --epic-color-charcoal-flat-light: var(--epic-color-charcoal-400);
  --epic-color-charcoal-flat-hover: var(--epic-color-charcoal-600);
  --epic-color-charcoal-flat-disabled: color-mix(in srgb, var(--epic-color-charcoal-500) 30%, transparent);
  --epic-color-charcoal-flat-soft: color-mix(in srgb, var(--epic-color-charcoal-500) 15%, transparent);
  --epic-color-charcoal-flat-soft-hover: color-mix(in srgb, var(--epic-color-charcoal-500) 25%, transparent);
  --epic-color-charcoal-flat-soft-transparent: color-mix(in srgb, var(--epic-color-charcoal-500) 10%, transparent);
  --epic-color-charcoal-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-charcoal-500) 7%, transparent);

  --epic-color-charcoal-font-base: var(--epic-color-charcoal-500);
  --epic-color-charcoal-font-soft-base: var(--epic-color-charcoal-700);
  --epic-color-charcoal-font-hover: var(--epic-color-charcoal-800);
  --epic-color-charcoal-font-inverse: var(--epic-color-charcoal-500);
}

.semtle-dark {
  --epic-color-gray-flat-base: var(--epic-color-gray-600);
  --epic-color-gray-flat-light: var(--epic-color-gray-500);
  --epic-color-gray-flat-hover: var(--epic-color-gray-700);
  --epic-color-gray-flat-disabled: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-color-gray-flat-disabled-strong: color-mix(in srgb, var(--epic-color-gray-500) 50%, transparent);
  --epic-color-gray-flat-soft: color-mix(in srgb, var(--epic-color-gray-500) 35%, transparent);
  --epic-color-gray-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-color-gray-flat-thumbnail: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

  --epic-color-gray-font-base: var(--epic-color-gray-400);
  --epic-color-gray-font-soft-base: var(--epic-color-gray-300);
  --epic-color-gray-font-hover: var(--epic-color-gray-600);
  --epic-color-gray-font-inverse: var(--epic-color-white);

  --epic-color-black-flat-base: var(--epic-color-white);
  --epic-color-black-flat-light: var(--epic-color-gray-25);
  --epic-color-black-flat-hover: var(--epic-color-gray-50);
  --epic-color-black-flat-line-hover: var(--epic-color-gray-500);
  --epic-color-black-flat-disabled: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
  --epic-color-black-flat-soft: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
  --epic-color-black-flat-soft-hover: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-color-black-flat-soft-transparent: color-mix(in srgb, var(--epic-color-white) 5%, transparent);

  --epic-color-black-font-base: var(--epic-color-white);
  --epic-color-black-font-hover: var(--epic-color-gray-750);
  --epic-color-black-font-hover-strong: var(--epic-color-gray-400);
  --epic-color-black-font-disabled: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
  --epic-color-black-font-inverse: var(--epic-color-gray-950);
  --epic-color-black-font-inverse-hover: var(--epic-color-gray-700);

  --epic-color-white-flat-base: var(--epic-color-gray-950);
  --epic-color-white-flat-light: var(--epic-color-gray-800);
  --epic-color-white-flat-hover: var(--epic-color-gray-50);
  --epic-color-white-flat-line-hover: var(--epic-color-gray-600);
  --epic-color-white-flat-disabled: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
  --epic-color-white-flat-disabled-strong: color-mix(in srgb, var(--epic-color-gray-950) 20%, transparent);
  --epic-color-white-flat-soft: color-mix(in srgb, var(--epic-color-white) 20%, transparent);

  --epic-color-white-font-hover: var(--epic-color-gray-50);
  --epic-color-white-font-hover-strong: var(--epic-color-gray-400);
  --epic-color-white-font-disabled-strong: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
  --epic-color-white-font-inverse: var(--epic-color-white);

  --epic-color-brand-flat-logo: var(--epic-color-white);
  --epic-color-brand-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 40%, transparent);
  --epic-color-brand-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 35%, transparent);
  --epic-color-brand-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 35%, transparent);
  --epic-color-brand-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
  --epic-color-brand-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
  --epic-color-brand-flat-icon-duotone: color-mix(in srgb, var(--epic-color-blue-500) 75%, transparent);

  --epic-color-brand-font-base: var(--epic-color-blue-300);
  --epic-color-brand-font-soft-base: var(--epic-color-blue-300);
  --epic-color-brand-font-hover: var(--epic-color-blue-500);
  --epic-color-brand-font-inverse: var(--epic-color-white);

  --epic-color-blue-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 40%, transparent);
  --epic-color-blue-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 20%, transparent);
  --epic-color-blue-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 35%, transparent);
  --epic-color-blue-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
  --epic-color-blue-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);

  --epic-color-blue-font-base: var(--epic-color-blue-400);
  --epic-color-blue-font-soft: var(--epic-color-blue-400);
  --epic-color-blue-font-hover: var(--epic-color-blue-500);
  --epic-color-blue-font-inverse: var(--epic-color-white);

  --epic-color-green-flat-disabled: color-mix(in srgb, var(--epic-color-green-500) 40%, transparent);
  --epic-color-green-flat-soft: color-mix(in srgb, var(--epic-color-green-500) 25%, transparent);
  --epic-color-green-flat-soft-hover: color-mix(in srgb, var(--epic-color-green-500) 35%, transparent);
  --epic-color-green-flat-soft-transparent: color-mix(in srgb, var(--epic-color-green-500) 20%, transparent);
  --epic-color-green-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-green-500) 20%, transparent);

  --epic-color-green-font-base: var(--epic-color-green-500);
  --epic-color-green-font-soft-base: var(--epic-color-green-400);
  --epic-color-green-font-hover: var(--epic-color-green-600);
  --epic-color-green-font-inverse: var(--epic-color-green-500);

  --epic-color-forest-flat-disabled: color-mix(in srgb, var(--epic-color-forest-500) 40%, transparent);
  --epic-color-forest-flat-disabled-strong: color-mix(in srgb, var(--epic-color-lime-500) 40%, transparent);
  --epic-color-forest-flat-soft: color-mix(in srgb, var(--epic-color-forest-500) 35%, transparent);
  --epic-color-forest-flat-soft-hover: color-mix(in srgb, var(--epic-color-forest-500) 35%, transparent);
  --epic-color-forest-flat-soft-transparent: color-mix(in srgb, var(--epic-color-forest-500) 15%, transparent);
  --epic-color-forest-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-forest-500) 15%, transparent);

  --epic-color-forest-font-base: var(--epic-color-forest-400);
  --epic-color-forest-font-soft-base: var(--epic-color-forest-300);
  --epic-color-forest-font-hover: var(--epic-color-forest-500);
  --epic-color-forest-font-inverse: var(--epic-color-white);

  --epic-color-lime-flat-disabled: color-mix(in srgb, var(--epic-color-lime-500) 40%, transparent);
  --epic-color-lime-flat-soft: color-mix(in srgb, var(--epic-color-lime-500) 30%, transparent);
  --epic-color-lime-flat-soft-hover: color-mix(in srgb, var(--epic-color-lime-500) 35%, transparent);
  --epic-color-lime-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lime-500) 15%, transparent);
  --epic-color-lime-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-lime-500) 15%, transparent);

  --epic-color-lime-font-base: var(--epic-color-lime-500);
  --epic-color-lime-font-soft-base: var(--epic-color-lime-300);
  --epic-color-lime-font-hover: var(--epic-color-lime-300);
  --epic-color-lime-font-inverse: var(--epic-color-lime-500);

  --epic-color-mint-flat-base: var(--epic-color-mint-500);
  --epic-color-mint-flat-hover: var(--epic-color-mint-600);
  --epic-color-mint-flat-disabled: color-mix(in srgb, var(--epic-color-mint-500) 40%, transparent);
  --epic-color-mint-flat-soft: color-mix(in srgb, var(--epic-color-mint-500) 25%, transparent);
  --epic-color-mint-flat-soft-hover: color-mix(in srgb, var(--epic-color-mint-500) 35%, transparent);
  --epic-color-mint-flat-soft-transparent: color-mix(in srgb, var(--epic-color-mint-500) 15%, transparent);
  --epic-color-mint-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-mint-500) 15%, transparent);

  --epic-color-mint-font-base: var(--epic-color-mint-500);
  --epic-color-mint-font-soft-base: var(--epic-color-mint-500);
  --epic-color-mint-font-hover: var(--epic-color-mint-600);
  --epic-color-mint-font-inverse: var(--epic-color-mint-500);

  --epic-color-cyan-flat-base: var(--epic-color-cyan-500);
  --epic-color-cyan-flat-disabled: color-mix(in srgb, var(--epic-color-cyan-500) 40%, transparent);
  --epic-color-cyan-flat-soft: color-mix(in srgb, var(--epic-color-cyan-500) 30%, transparent);
  --epic-color-cyan-flat-soft-hover: color-mix(in srgb, var(--epic-color-cyan-500) 35%, transparent);
  --epic-color-cyan-flat-soft-transparent: color-mix(in srgb, var(--epic-color-cyan-500) 15%, transparent);
  --epic-color-cyan-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-cyan-500) 15%, transparent);

  --epic-color-cyan-font-base: var(--epic-color-cyan-500);
  --epic-color-cyan-font-soft-base: var(--epic-color-cyan-500);
  --epic-color-cyan-font-hover: var(--epic-color-cyan-600);
  --epic-color-cyan-font-inverse: var(--epic-color-cyan-500);

  --epic-color-navy-flat-disabled: color-mix(in srgb, var(--epic-color-navy-500) 40%, transparent);
  --epic-color-navy-flat-soft: color-mix(in srgb, var(--epic-color-navy-500) 40%, transparent);
  --epic-color-navy-flat-soft-hover: color-mix(in srgb, var(--epic-color-navy-500) 35%, transparent);
  --epic-color-navy-flat-soft-transparent: color-mix(in srgb, var(--epic-color-navy-500) 15%, transparent);
  --epic-color-navy-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-navy-500) 15%, transparent);

  --epic-color-navy-font-base: var(--epic-color-navy-400);
  --epic-color-navy-font-soft-base: var(--epic-color-navy-300);
  --epic-color-navy-font-hover: var(--epic-color-navy-500);
  --epic-color-navy-font-inverse: var(--epic-color-white);

  --epic-color-indigo-flat-button-line: var(--epic-color-indigo-300);
  --epic-color-indigo-flat-hover: var(--epic-color-indigo-400);
  --epic-color-indigo-flat-disabled: color-mix(in srgb, var(--epic-color-indigo-500) 40%, transparent);
  --epic-color-indigo-flat-soft: color-mix(in srgb, var(--epic-color-indigo-500) 40%, transparent);
  --epic-color-indigo-flat-soft-hover: color-mix(in srgb, var(--epic-color-indigo-500) 35%, transparent);
  --epic-color-indigo-flat-soft-transparent: color-mix(in srgb, var(--epic-color-indigo-500) 15%, transparent);
  --epic-color-indigo-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-indigo-500) 15%, transparent);

  --epic-color-indigo-font-base: var(--epic-color-indigo-300);
  --epic-color-indigo-font-soft-base: var(--epic-color-indigo-300);
  --epic-color-indigo-font-hover: var(--epic-color-indigo-200);
  --epic-color-indigo-font-inverse: var(--epic-color-white);

  --epic-color-purple-flat-disabled: color-mix(in srgb, var(--epic-color-purple-500) 40%, transparent);
  --epic-color-purple-flat-soft: color-mix(in srgb, var(--epic-color-purple-500) 30%, transparent);
  --epic-color-purple-flat-soft-hover: color-mix(in srgb, var(--epic-color-purple-500) 35%, transparent);
  --epic-color-purple-flat-soft-transparent: color-mix(in srgb, var(--epic-color-purple-500) 15%, transparent);

  --epic-color-purple-font-base: var(--epic-color-purple-400);
  --epic-color-purple-font-soft-base: var(--epic-color-purple-300);
  --epic-color-purple-font-hover: var(--epic-color-purple-500);
  --epic-color-purple-font-inverse: var(--epic-color-white);

  --epic-color-lavendar-flat-disabled: color-mix(in srgb, var(--epic-color-lavender-500) 40%, transparent);
  --epic-color-lavendar-flat-soft: color-mix(in srgb, var(--epic-color-lavender-500) 35%, transparent);
  --epic-color-lavendar-flat-soft-hover: color-mix(in srgb, var(--epic-color-lavender-500) 25%, transparent);
  --epic-color-lavendar-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lavender-500) 15%, transparent);

  --epic-color-lavendar-font-base: var(--epic-color-lavender-400);
  --epic-color-lavendar-font-soft-base: var(--epic-color-lavender-300);
  --epic-color-lavendar-font-hover: var(--epic-color-lavender-500);
  --epic-color-lavendar-font-inverse: var(--epic-color-white);

  --epic-color-orange-flat-disabled: color-mix(in srgb, var(--epic-color-orange-500) 40%, transparent);
  --epic-color-orange-flat-soft: color-mix(in srgb, var(--epic-color-orange-500) 30%, transparent);
  --epic-color-orange-flat-soft-hover: color-mix(in srgb, var(--epic-color-orange-500) 35%, transparent);
  --epic-color-orange-flat-soft-transparent: color-mix(in srgb, var(--epic-color-orange-500) 15%, transparent);
  --epic-color-orange-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-orange-500) 15%, transparent);

  --epic-color-orange-font-base: var(--epic-color-orange-500);
  --epic-color-orange-font-soft-base: var(--epic-color-orange-500);
  --epic-color-orange-font-hover: var(--epic-color-orange-600);
  --epic-color-orange-font-inverse: var(--epic-color-orange-500);

  --epic-color-yellow-flat-disabled: color-mix(in srgb, var(--epic-color-yellow-500) 25%, transparent);
  --epic-color-yellow-flat-soft: color-mix(in srgb, var(--epic-color-yellow-500) 25%, transparent);
  --epic-color-yellow-flat-soft-hover: color-mix(in srgb, var(--epic-color-yellow-500) 35%, transparent);
  --epic-color-yellow-flat-soft-transparent: color-mix(in srgb, var(--epic-color-yellow-500) 10%, transparent);
  --epic-color-yellow-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-yellow-500) 10%, transparent);

  --epic-color-yellow-font-base: var(--epic-color-yellow-500);
  --epic-color-yellow-font-soft-base: var(--epic-color-yellow-400);
  --epic-color-yellow-font-hover: var(--epic-color-yellow-600);
  --epic-color-yellow-font-inverse: var(--epic-color-yellow-500);

  --epic-color-red-flat-disabled: color-mix(in srgb, var(--epic-color-red-500) 40%, transparent);
  --epic-color-red-flat-disabled-strong: color-mix(in srgb, var(--epic-color-red-500) 50%, transparent);
  --epic-color-red-flat-soft: color-mix(in srgb, var(--epic-color-red-500) 30%, transparent);
  --epic-color-red-flat-soft-hover: color-mix(in srgb, var(--epic-color-red-500) 35%, transparent);
  --epic-color-red-flat-soft-transparent: color-mix(in srgb, var(--epic-color-red-500) 15%, transparent);
  --epic-color-red-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-red-500) 15%, transparent);

  --epic-color-red-font-base: var(--epic-color-red-400);
  --epic-color-red-font-soft-base: var(--epic-color-red-300);
  --epic-color-red-font-hover: var(--epic-color-red-500);
  --epic-color-red-font-inverse: var(--epic-color-white);

  --epic-color-charcoal-flat-base: var(--epic-color-charcoal-600);
  --epic-color-charcoal-flat-hover: var(--epic-color-charcoal-700);
  --epic-color-charcoal-flat-disabled: color-mix(in srgb, var(--epic-color-charcoal-500) 40%, transparent);
  --epic-color-charcoal-flat-soft: color-mix(in srgb, var(--epic-color-charcoal-500) 35%, transparent);
  --epic-color-charcoal-flat-soft-hover: color-mix(in srgb, var(--epic-color-charcoal-500) 40%, transparent);
  --epic-color-charcoal-flat-soft-transparent: color-mix(in srgb, var(--epic-color-charcoal-500) 10%, transparent);
  --epic-color-charcoal-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-charcoal-500) 10%, transparent);

  --epic-color-charcoal-font-base: var(--epic-color-charcoal-400);
  --epic-color-charcoal-font-soft-base: var(--epic-color-charcoal-300);
  --epic-color-charcoal-font-hover: var(--epic-color-charcoal-500);
  --epic-color-charcoal-font-inverse: var(--epic-color-white);
}