@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@source "../../../shared";

@theme {
  --color-transparent: transparent;
  --color-current: currentColor;

  --color-light-red: #e93147;
  --color-light-orange: #FF9800;
  --color-light-yellow: #FFEB3B;
  --color-light-green: #388E3C;
  --color-light-indigo: #7986CB;
  --color-light-cyan: #00bfbc;
  --color-light-lime: #8BC34A;
  --color-light-blue: #086ddd;
  --color-light-purple: #AB47BC;
  --color-light-pink: #d53984;
  --color-light-0: #ffffff;
  --color-light-5: #fcfcfc;
  --color-light-10: #fafafa;
  --color-light-20: #f7f7f7;
  --color-light-25: #e4e4e4;
  --color-light-30: #dfdfdf;
  --color-light-35: #d2d2d2;
  --color-light-40: #bdbdbd;
  --color-light-50: #ababab;
  --color-light-60: #707070;
  --color-light-70: #5c5c5c;
  --color-light-100: #202020;

  --color-dark-red: #fb464c;
  --color-dark-redBack: #5A292B;
  --color-dark-orange: #e9973f;
  --color-dark-yellow: #e0de71;
  --color-dark-green: #44cf6e;
  --color-dark-greenBack: #284E34;
  --color-dark-cyan: #53dfdd;
  --color-dark-blue: #027aff;
  --color-dark-purple: #a882ff;
  --color-dark-pink: #fa99cd;
  --color-dark-0: #1e1e1e;
  --color-dark-5: #212121;
  --color-dark-10: #242424;
  --color-dark-20: #262626;
  --color-dark-25: #2a2a2a;
  --color-dark-30: #363636;
  --color-dark-35: #3f3f3f;
  --color-dark-40: #555555;
  --color-dark-50: #666666;
  --color-dark-60: #999999;
  --color-dark-70: #b3b3b3;
  --color-dark-100: #dadada;

  --color-accent-purple: #43A047;
  --color-accent-blue: #26C6DA;

  --shadow-raw: 0 0 0 2px var(--tw-shadow-color);

  --animate-slideDownAndFade: slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-slideLeftAndFade: slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-slideUpAndFade: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-slideRightAndFade: slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-contentShow: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDownAndFade {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeftAndFade {
  from { opacity: 0; transform: translateX(2px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideUpAndFade {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideRightAndFade {
  from { opacity: 0; transform: translateX(-2px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes contentShow {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}