/* Twilight theme */

:root {
  --purple-900: #3a0c8b;
  --purple-800: #5009b5;
  --purple-700: #794cff;
  --purple-300: #c7b0e7;
  --purple-200: #d5c4ed;
  --purple-100: #e3d8f3;
  --purple-50: #f1ebf9;
  --purple-25: #f8f5fc;

  --turquoise-900: #009998;
  --turquoise-800: #00bbba;
  --turquoise-700: #52e0e0;
  --turquoise-300: #ade9e9;
  --turquoise-200: #c2efee;
  --turquoise-100: #d6f4f4;
  --turquoise-50: #ebfafa;
  --turquoise-25: #f5fcfc;

  --primary-color-default: var(--purple-800);
  --primary-color-hover: var(--purple-700);
  --primary-color-active: var(--purple-900);
  --primary-color-focus: var(--purple-700);
  --primary-color-disable: #cbd1d5;

  --primary-color-opacity-32: var(--purple-300);
  --primary-color-opacity-24: var(--purple-200);
  --primary-color-opacity-16: var(--purple-100);
  --primary-color-opacity-8: var(--purple-50);
  --primary-color-opacity-4: var(--purple-25);

  --secondary-color-default: var(--turquoise-800);
  --secondary-color-hover: var(--turquoise-700);
  --secondary-color-active: var(--turquoise-900);
  --secondary-color-focus: var(--turquoise-700);
  --secondary-color-disable: #cbd1d5;

  --secondary-color-opacity-32: var(--turquoise-300);
  --secondary-color-opacity-24: var(--turquoise-200);
  --secondary-color-opacity-16: var(--turquoise-100);
  --secondary-color-opacity-8: var(--turquoise-50);
  --secondary-color-opacity-4: var(--turquoise-25);

  --primary-gradient: linear-gradient(
    89.18deg,
    var(--grayscale-color-900) 1.41%,
    var(--primary-color-default) 98.59%
  );
  --primary-gradient-image: linear-gradient(
    89.18deg,
    var(--grayscale-color-900) 1.41%,
    rgba(35, 30, 51, 0.5) 98.59%
  );
}