:root {
  --font-header: "Stack Sans Notch", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-title: "Rubik Doodle Shadow", system-ui;
  --font-body: "Stack Sans Text", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --primary: hsl(233 22% 23%);
  --secondary: hsl(126 61% 80%);
  --accent-1: hsl(268 17% 66%);
  --accent-2: hsl(176 94% 28%);
  --accent-3: hsl(198 100% 71%);
  --success: hsl(86 93% 24%);
  --danger: hsl(360 82% 45%);
  --primary-000: hsl(from var(--primary) h s calc(l * 0.1));
  --primary-050: hsl(from var(--primary) h s calc(l * 0.2));
  --primary-100: hsl(from var(--primary) h s calc(l * 0.4));
  --primary-300: hsl(from var(--primary) h s calc(l * 0.8));
  --primary-500: hsl(from var(--primary) h s l);
  --primary-600: hsl(from var(--primary) h s calc(l * 1.875));
  --primary-700: hsl(from var(--primary) h s calc(l * 2.75));
  --primary-800: hsl(from var(--primary) h s calc(l * 3.625));
  --primary-900: hsl(from var(--primary) h s calc(l * 4.5));
  --primary-text: light-dark(var(--grey-100), var(--grey-900));
  --secondary-000: hsl(from var(--secondary) h calc(s * 0.4) calc(l * 0.4));
  --secondary-050: hsl(from var(--secondary) h calc(s * 0.5) calc(l * 0.55));
  --secondary-100: hsl(from var(--secondary) h calc(s * 0.6) calc(l * 0.7));
  --secondary-300: hsl(from var(--secondary) h calc(s * 0.7) calc(l * 0.85));
  --secondary-500: hsl(from var(--secondary) h s l);
  --secondary-600: hsl(from var(--secondary) h s calc(l * 1.04));
  --secondary-700: hsl(from var(--secondary) h s calc(l * 1.08));
  --secondary-800: hsl(from var(--secondary) h s calc(l * 1.12));
  --secondary-900: hsl(from var(--secondary) h s calc(l * 1.16));
  --secondary-text: var(--grey-100);
  --accent-1-000: hsl(from var(--accent-1) h s calc(l * 0.2));
  --accent-1-050: hsl(from var(--accent-1) h s calc(l * 0.4));
  --accent-1-100: hsl(from var(--accent-1) h s calc(l * 0.6));
  --accent-1-300: hsl(from var(--accent-1) h s calc(l * 0.8));
  --accent-1-500: hsl(from var(--accent-1) h s l);
  --accent-1-600: hsl(from var(--accent-1) h s calc(l * 1.075));
  --accent-1-700: hsl(from var(--accent-1) h s calc(l * 1.15));
  --accent-1-800: hsl(from var(--accent-1) h s calc(l * 1.225));
  --accent-1-900: hsl(from var(--accent-1) h s calc(l * 1.3));
  --accent-1-text: var(--grey-100);
  --accent-2-000: hsl(from var(--accent-2) h s calc(l * 0.1));
  --accent-2-050: hsl(from var(--accent-2) h s calc(l * 0.2));
  --accent-2-100: hsl(from var(--accent-2) h s calc(l * 0.4));
  --accent-2-300: hsl(from var(--accent-2) h s calc(l * 0.8));
  --accent-2-500: hsl(from var(--accent-2) h s l);
  --accent-2-600: hsl(from var(--accent-2) h calc(s * 0.8) calc(l * 1.35));
  --accent-2-700: hsl(from var(--accent-2) h calc(s * 0.7) calc(l * 1.7));
  --accent-2-800: hsl(from var(--accent-2) h calc(s * 0.6) calc(l * 2.05));
  --accent-2-900: hsl(from var(--accent-2) h calc(s * 0.5) calc(l * 2.4));
  --accent-2-text: var(--grey-100);
  --accent-3-000: hsl(from var(--accent-3) h calc(s * 0.5) calc(l * 0.1));
  --accent-3-050: hsl(from var(--accent-3) h calc(s * 0.6) calc(l * 0.2));
  --accent-3-100: hsl(from var(--accent-3) h calc(s * 0.7) calc(l * 0.4));
  --accent-3-300: hsl(from var(--accent-3) h calc(s * 0.8) calc(l * 0.8));
  --accent-3-500: hsl(from var(--accent-3) h s l);
  --accent-3-600: hsl(from var(--accent-3) h s calc(l * 1.0625));
  --accent-3-700: hsl(from var(--accent-3) h s calc(l * 1.125));
  --accent-3-800: hsl(from var(--accent-3) h s calc(l * 1.1875));
  --accent-3-900: hsl(from var(--accent-3) h s calc(l * 1.25));
  --accent-3-text: var(--grey-100);
  --success-100: hsl(from var(--success) h s calc(l * 0.2));
  --success-300: hsl(from var(--success) h s calc(l * 0.6));
  --success-500: hsl(from var(--success) h s l);
  --success-600: hsl(from var(--success) h calc(s * 1.0) calc(l * 1.2));
  --success-700: hsl(from var(--success) h calc(s * 0.9) calc(l * 1.4));
  --success-800: hsl(from var(--success) h calc(s * 0.85) calc(l * 1.6));
  --success-900: hsl(from var(--success) h calc(s * 0.8) calc(l * 1.8));
  --danger-h: 360;
  --danger-s: 82%;
  --danger-l: 45%;
  --danger-100: hsl(from var(--danger) h s calc(l * 0.2));
  --danger-300: hsl(from var(--danger) h s calc(l * 0.6));
  --danger-500: hsl(from var(--danger) h s l);
  --danger-600: hsl(from var(--danger) h s calc(l * 1.1));
  --danger-700: hsl(from var(--danger) h s calc(l * 1.2));
  --danger-800: hsl(from var(--danger) h s calc(l * 1.3));
  --danger-900: hsl(from var(--danger) h s calc(l * 1.4));
  --grey-100: hsl(233 8% 10%);
  --grey-300: hsl(233 8% 30%);
  --grey-500: hsl(233 8% 50%);
  --grey-600: hsl(233 8% 60%);
  --grey-700: hsl(233 8% 70%);
  --grey-800: hsl(233 8% 80%);
  --grey-900: hsl(233 8% 90%);
  --fs-h-0: clamp(1.5rem, 2vw + 1rem, 3.5rem);
  --fs-h-1: clamp(2rem, 8vw + 1rem, 10rem);
  --fs-h-2: clamp(2rem, 5vw + 1rem, 8rem);
  --fs-h-3: clamp(2rem, 3vw + 1rem, 5rem);
  --fs-h-4: clamp(1.5rem, 2vw + 1rem, 3.5rem);
  --fs-h-5: clamp(1rem, 1vw + 1rem, 2rem);
  --fs-p-1: clamp(0.75rem, 0.3vw + 0.8rem, 1.5rem);
  --fs-p-2: clamp(0.8rem, 0.5vw + 0.75rem, 2rem);
  --fs-p-3: clamp(0.4rem, 0.3vw + 0.65rem, 2rem);
  --fs-st-1: clamp(0.5rem, 0.25vw + 0.65rem, 1rem);
  --fs-form: clamp(0.7rem, 0.3vw + 0.6rem, 1.25rem);
  --box-shadow-primary: 0.1rem 0.1rem 0.15rem hsl(from var(--grey-100) h s l / 0.35),
                        0.1rem 0.1rem 0.5rem hsl(from var(--grey-100) h s l / 0.15);
  --box-shadow-card: 0.15rem 0.15rem 0.15rem hsl(from var(--grey-100) h s l / 0.25),
                     0.15rem 0.15rem 0.5rem hsl(from var(--grey-100) h s l / 0.15);
  --screen-size-sm: $screen-size-sm;
  --screen-size-md: $screen-size-md;
  --screen-size-lg: $screen-size-lg;
  --container-bg-color: light-dark(var(--primary-900), var(--primary-500));
  --container-border-color: light-dark(var(--primary-900), var(--primary-600));
  --card-bg-color: light-dark(var(--primary-900), var(--primary-500));
  --card-bg-color-sub: light-dark(var(--primary-900), var(--primary-500));
  --card-border-color: light-dark(var(--primary-900), var(--primary-600));
  --card-text-color: var(--primary-text);
  --card-highlight-color: light-dark(var(--accent-1-300), var(--accent-1-700));
  --input-size: clamp(0.75rem, 0.3vw + 1rem, 2rem);
  --input-padding: 0.5rem;
  --input-bg-color: var(--grey-900);
  --input-color: var(--grey-100);
  --input-border-color: var(--accent-1-500);
  --input-border-color-hover: var(--accent-1-700);
  --input-valid-color: var(--success-500);
  --input-valid-color-hover: var(--success-700);
  --input-invalid-color: var(--danger-500);
  --input-invalid-color-hover: var(--danger-700);
}
@media (prefers-color-scheme: light) {
  :root {
    --color-scheme: light;
    color-scheme: light;
    --background-image: url("img/topography-light.svg");
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-scheme: dark;
    color-scheme: dark;
    --background-image: url("img/topography-dark.svg");
  }
}

@keyframes background-drift {
  0% {
    background-position: 0rem 0rem;
  }
  100% {
    background-position: -100rem -50rem;
  }
}
@keyframes background-color-shift {
  0% {
    --background-dot-color: var(--accent-1-300);
    /*background-image: radial-gradient(var(--accent-1-300) 4%, transparent 4% );*/
  }
  100% {
    /*background-image: radial-gradient(var(--accent-2-900) 4%, transparent 4% );*/
    --background-dot-color: var(--accent-2-900);
  }
}