@layer reset, base, components, utilities;

@import url("./reset.css") layer(reset);
@import url("./base.css") layer(base);
@import url("./components.css") layer(components);
@import url("./animations.css") layer(utilities);
@import url("./utilities.css") layer(utilities);

:root {
  /* Colour variables */
  --color-primary: oklch(98.66% 0.0021 17.19);
  --color-secondary: oklch(6.92% 0.008 284.11);
  --color-tertiary: oklch(60% 0.05 95);

  /* Layout variables */
  --header-height: 64px;
  --page-padding: 2rem;

  @media (prefers-color-scheme: dark) {
    /* Colour variables */
    --color-primary: oklch(28.38% 0.0047 247.99);
    --color-secondary: oklch(98.66% 0.0021 17.19);
    --color-tertiary: oklch(70.34% 0.0159 70.81);
  }
}

main {
  padding-top: var(--header-height);
}