:root {
    color-scheme: light dark ;
    /* Dark theme colors */
    --bg-dark: hsl(0, 0%, 10%);
    --bg: hsl(0, 0%, 5%);
    --bg-light : hsl(0, 0%, 0%);

    --card: hsl(238, 48%, 15%);
    --card-shadow: 0 4px 10px hsla(0, 0%, 60%, 0.75);

    --text-light: hsl(0, 0%, 90%);
    --text: hsl(0, 0%, 80%);
    --text-dark: 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);

    --opposite: hsl(183, 90%, 50%);
    --opposite-dark: hsl(183, 90%, 30%);
    --opposite-light: hsl(183, 90%, 70%);
    --opposite-shadow: hsla(183, 90%, 90%, 0.5);

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

    --muted: #0c1222;
    --neutral:#ededed;
    --primary: hsl(183, 100%, 50%); /* skyblue */
    --primary-dark: hsl(201, 100%, 51%);
    --slate: hsl(255, 79%, 27%);
    --primary-ink: #03221f;
    --primary-white: #e8edf7;
    --ring: #4ad9c7;
    --ok: #1ad176;
    --warn: #ffb020;
    --danger: #ff5563;
    --info: #4ea1ff;

    --chip-open: #18c56e;
    --chip-running: #ff9b27;
    --chip-closed: #ffd84a;
    --chip-finished: #ff5563;
    --chip-scheduled: #4ea1ff;

    --jersey-white: #ffffff;
    --jersey-red: #e53935;
    --jersey-green: #43a047;
    --jersey-blue: #1e88e5;

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

    header img {
      filter: hue-rotate(290deg) saturate(80) brightness(95%);
    }
  }

  @media (prefers-color-scheme: light) {
        :root {
            --bg-light: hsl(0, 0%, 100%);
            --bg: hsl(0, 0%, 95%);
            --bg-dark: hsl(0, 0%, 90%);

            --card-2: hsl(0, 0%, 97%);
            --card: hsla(260, 100%, 35%, 0.03);
            --card-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.25);
            --text-dark: hsl(0, 0%, 10%);
            --text: hsl(0, 0%, 20%);
            --text-light: hsl(0, 0%, 30%);

            --muted:#51607f;
    
            header img {filter: drop-shadow(2px 2px 2px var(--accent-dark));}

        }
    body { color: var(--text); }
    .topbar { background: var(--bg-dark); }
  }