/*
  Global tokens and page defaults.
  Change these values first when you want to recolor the whole component set.
*/

:root {
  color-scheme: light;
  --aero-font: 9pt "Segoe UI", "SegoeUI", "Noto Sans", Tahoma, sans-serif;
  --aero-ink: #10273b;
  --aero-muted: #526574;
  --aero-blue: #269ee8;
  --aero-blue-dark: #07538c;
  --aero-cyan: #85e8ff;
  --aero-green: #69c940;
  --aero-border: rgba(8, 51, 78, 0.76);
  --aero-glass: rgba(202, 240, 255, 0.58);
  --aero-surface: rgba(255, 255, 255, 0.94);
  --aero-radius: 9px;
  --aero-shadow: 0 18px 48px rgba(0, 49, 79, 0.28), 0 4px 12px rgba(0, 26, 52, 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font: var(--aero-font);
  color: var(--aero-ink);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.82) 0 3%, transparent 3.2%),
    radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.55) 0 5%, transparent 5.2%),
    linear-gradient(172deg, transparent 0 68%, rgba(111, 201, 55, 0.95) 68.2% 78%, #3a9f39 78.2%),
    linear-gradient(#67ccef 0%, #b7effb 58%, #f7fdff 72%);
  background-attachment: fixed;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #073f9a;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}