@layer base {
  :root {
    color-scheme: light dark;

    --primary-hue: 307;
    --clr-text: light-dark(
      oklch(5% 0.1 var(--primary-hue)),
      oklch(100% 0.1 var(--primary-hue))
    );
    --clr-background: light-dark(
      oklch(100% 0.1 var(--primary-hue)),
      oklch(15% 0.15 var(--primary-hue))
    );
    --clr-border: light-dark(
      oklch(90% 0.2 var(--primary-hue)),
      oklch(25% 0.1 var(--primary-hue))
    );

    /* Adding snow fall colour whilst we are using it */
    --clr-snow-fall: light-dark(
      oklch(25% 0.15 var(--primary-hue)),
      oklch(85% 0.2 var(--primary-hue))
    );
  }

  body {
    background-color: var(--clr-background);
    color: var(--clr-text);
  }
}