@layer reset, base, layout, dark-light, navigation, nav-dropdown, nav-responsive;

@import "reset.css" layer(reset);
@import "base.css" layer(base);
@import "layout.css" layer(layout);
@import "dark-light.css" layer(dark-light);
@import "nav-dropdown.css" layer(nav-dropdown);
@import "navigation.css" layer(navigation);
@import "nav-responsive.css" layer(nav-responsive);
@import "scroll-animation.css" layer(scroll-animation);
:root {
  color-scheme: light dark;
  &:has(input[name="color-scheme"][value="light dark"]:checked) {
    color-scheme: light dark;
  }
  &:has(input[name="color-scheme"][value="light"]:checked) {
    color-scheme: light;
  }
  &:has(input[name="color-scheme"][value="dark"]:checked) {
    color-scheme: dark;
  }

  /* global tokens */
  --clr-blue1-light: #449dd5;
  --clr-blue1-dark: #2a84bb;
  --clr-blue2-light: #87c6ee;
  --clr-blue2-dark: #115178;
  --clr-blue3-light: #43b0f4;
  --clr-blue3-dark: #0b78bc;
  --clr-white-text-100: #f5f9fa;
  --clr-black-text-100: #05090a;
  --clr-white-background-100: #f4f7fb;
  --clr-black-background-100: #04070b;

  /* Contextual token begin */
  --clr-primary-light: var(--clr-blue1-light);
  --clr-primary-dark: var(--clr-blue1-dark);
  --clr-secondary-light: var(--clr-blue2-light);
  --clr-secondary-dark: var(--clr-blue2-dark);
  --clr-accent-light: var(--clr-blue3-light);
  --clr-accent-dark: var(--clr-blue3-dark);
  --clr-text-light: var(--clr-black-text-100);
  --clr-text-dark: var(--clr-white-text-100);
  --clr-background-light: var(--clr-white-background-100);
  --clr-background-dark: var(--clr-black-background-100);

  /* typo */
  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
    Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --ff-serif: Georgia, Garamond, Palatino, serif;
  --font-family-base: var(--ff-sans);
  --font-family-accent: var(--ff-serif);
  --fw-400: 400;
  --fw-500: 500;
  --fw-700: 700;
  --font-weight-default: var(--fw-400);
  --font-weight-semi-bold: var(--fw-500);
  --font-weight-bold: var(--fw-700);
  --font-size-small: 0.75rem;
  --font-size-default: clamp(1rem, -0.33rem + 6.67vw, 4rem);
  --font-size-large: 1, 25rem;
  --font-size-extralarge: 1.5rem;
  --fw-400: 400;
  --fw-500: 500;
  --fw-700: 700;
  --font-weight-default: var(--fw-400);
  --font-weight-semi-bold: var(--fw-500);
  --font-weight-bold: var(--fw-700);
  /* sizes */
}
@layer sticky-footer {
  html,
  body {
    height: 100%;
    margin: 0;
  }

  .wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }
}