@font-face {
  font-family: 'Krungthep';
  src: url('../fonts/Krungthep.ttf') format('truetype');
}

html {
  /* light-Dark theme colors - removed light "color-scheme: light dark;"*/
  color-scheme: dark;

  &[data-scheme="light"] {
    color-scheme: light;
    header img {
      filter: hue-rotate(260deg) saturate(100%) brightness(100%) invert(100%);
    }
  }

  &[data-scheme="dark"] {
    color-scheme: dark;
  }
}

:root {
  --bg-dark: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 10%));
  --bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 5%));
  --bg-light : light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 0%));

  --primary: light-dark(hsl(260, 100%, 35%), hsl(183, 90%, 50%));
  --primary-dark: light-dark(hsl(260, 100%, 20%), hsl(183, 90%, 30%));
  --primary-light: light-dark(hsl(255, 60%, 50%), hsl(183, 90%, 70%));
  --primary-shadow: light-dark(hsla(255, 100%, 60%, 0.5), hsla(183, 100%, 60%, 0.5));
  --primary-gradient: light-dark(linear-gradient(to right, hsl(260, 100%, 25%), hsl(255, 60%, 55%)), linear-gradient(to right, hsl(183, 90%, 40%), hsl(183, 90%, 60%)));
  --primary-60: light-dark(hsl(260, 100%, 35%, 0.6), hsl(183, 90%, 50%, 0.6));
  --primary-20: light-dark(hsl(260, 100%, 35%, 0.2), hsl(183, 90%, 50%, 0.2));

  --inverted: light-dark(hsl(183, 90%, 50%), hsl(260, 100%, 35%));
  --inverted-dark: light-dark(hsl(183, 90%, 30%), hsl(260, 100%, 20%));
  --inverted-light: light-dark(hsl(183, 90%, 70%), hsl(255, 60%, 50%));
  --inverted-shadow: light-dark(hsla(183, 100%, 60%, 0.5), hsla(255, 100%, 60%, 0.5));
  --inverted-gradient: light-dark(linear-gradient(to right, hsl(183, 90%, 40%), hsl(183, 90%, 60%)), linear-gradient(to right, hsl(260, 100%, 25%), hsl(255, 60%, 55%)));

  --card: light-dark(hsl(240, 0%, 90%), hsl(240, 0%, 10%));
  --card-shadow: 0 4px 10px light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 60%));
  --card-border: 1px solid var(--primary-60);

  --text-light: light-dark(hsl(0, 0%, 10%), hsl(0, 0%, 90%));
  --text: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 80%));
  --text-dark: light-dark(hsl(0, 0%, 30%), hsl(0, 0%, 70%));
  --text-darkest: hsl(0, 0%, 50%);

  --accent: hsl(260, 100%, 35%);
  --accent-dark: hsl(260, 100%, 20%);
  --accent-light: hsl(255, 60%, 50%);
  --accent-shadow: hsla(255, 100%, 60%, 0.5);
  --accent-gradient: linear-gradient(to right, hsl(260, 100%, 25%), hsl(255, 60%, 55%));

  --opposite: hsl(183, 90%, 50%);
  --opposite-dark: hsl(183, 90%, 30%);
  --opposite-light: hsl(183, 90%, 70%);
  --opposite-shadow: hsla(183, 100%, 60%, 0.5);
  --opposite-gradient: linear-gradient(to right, hsl(183, 90%, 40%), hsl(183, 90%, 60%));

  --test: hsl(280, 60%, 50%);
  --test2: hsl(175, 70%, 50%);

  --menu-hover: var(--accent-gradient);

  --muted: #0c1222;
  --neutral:#ededed;
  --slate: hsl(255, 79%, 27%);
  --primary-ink: #03221f;
  --primary-white: #e8edf7;
  --ring: #4ad9c7;
  --ok: hsl(150, 78%, 46%);
  --warn: #ffb020;
  --danger: #ff5563;
  --info: #4ea1ff;

  --chip-pending: hsl(180, 100%, 50%);
  --chip-scheduled: hsl(270, 70%, 65%);
  --chip-generated: hsl(210, 100%, 65%);
  --chip-running: hsl(150, 80%, 45%);
  --chip-closed: hsl(45, 100%, 50%);
  --chip-finished: hsl(0, 100%, 50%);
  --chip-open: hsl(30, 100%, 50%);

  --gradient-green: linear-gradient(to left, #9ebd13 0%, #008552 100%);
  --gradient-ok: linear-gradient(to right,  hsl(150, 78%, 46%) 0%, hsl(150, 78%, 35%) 100%);
  --gradient-red: linear-gradient(90deg, orangered, firebrick);
  --gradient-blue: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
  --gradient-white: linear-gradient(90deg, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);;

  --jersey-white: #ffffff;
  --jersey-red: #e53935;
  --jersey-green: hsl(123, 41%, 45%);
  --jersey-blue: #1e88e5;

  --status-green: light-dark(hsl(123, 40%, 40%), hsl(120, 100%, 60%));

  --radius: 16px;
  --shadow: 0 3px 3px hsla(0, 0%, 0%, 0.25);
  --shadow-small: 0 0 3px hsla(0, 0%, 0%, 0.25);

  --shadow-sm: inset 0 1px 3px hsla(0, 0%, 50%, 0.5),
                      0 1px 2px hsla(0, 0%, 0%, 0.5),
                      0 2px 4px hsla(0, 0%, 0%, 0.8);

  --gradient-light: linear-gradient(to bottom right, hsl(0, 0%, 90%), rgba(128, 128, 128, 0.39));

}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
      transform: translateY(0);
  }

  40% {
      transform: translateY(-10px);
  }

  60% {
      transform: translateY(-5px);
  }
}