.light {
  --md-sys-color-primary: rgb(75 92 146);
  --md-sys-color-surface-tint: rgb(75 92 146);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(219 225 255);
  --md-sys-color-on-primary-container: rgb(50 68 120);
  --md-sys-color-secondary: rgb(89 94 114);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(221 225 249);
  --md-sys-color-on-secondary-container: rgb(65 70 89);
  --md-sys-color-tertiary: rgb(116 84 112);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(255 214 248);
  --md-sys-color-on-tertiary-container: rgb(90 61 88);
  --md-sys-color-error: rgb(186 26 26);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 214);
  --md-sys-color-on-error-container: rgb(147 0 10);
  --md-sys-color-background: rgb(250 248 255);
  --md-sys-color-on-background: rgb(26 27 33);
  --md-sys-color-surface: rgb(250 248 255);
  --md-sys-color-on-surface: rgb(26 27 33);
  --md-sys-color-surface-variant: rgb(226 226 236);
  --md-sys-color-on-surface-variant: rgb(69 70 79);
  --md-sys-color-outline: rgb(117 118 128);
  --md-sys-color-outline-variant: rgb(197 198 208);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(47 48 54);
  --md-sys-color-inverse-on-surface: rgb(241 240 247);
  --md-sys-color-inverse-primary: rgb(180 197 255);
  --md-sys-color-primary-fixed: rgb(219 225 255);
  --md-sys-color-on-primary-fixed: rgb(0 23 75);
  --md-sys-color-primary-fixed-dim: rgb(180 197 255);
  --md-sys-color-on-primary-fixed-variant: rgb(50 68 120);
  --md-sys-color-secondary-fixed: rgb(221 225 249);
  --md-sys-color-on-secondary-fixed: rgb(22 27 44);
  --md-sys-color-secondary-fixed-dim: rgb(193 198 221);
  --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
  --md-sys-color-tertiary-fixed: rgb(255 214 248);
  --md-sys-color-on-tertiary-fixed: rgb(43 18 43);
  --md-sys-color-tertiary-fixed-dim: rgb(226 187 220);
  --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
  --md-sys-color-surface-dim: rgb(218 217 224);
  --md-sys-color-surface-bright: rgb(250 248 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(244 243 250);
  --md-sys-color-surface-container: rgb(238 237 244);
  --md-sys-color-surface-container-high: rgb(232 231 239);
  --md-sys-color-surface-container-highest: rgb(227 226 233);
}

:root {
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

:root {
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 12px 32px rgba(15, 23, 42, 0.14);
  --motion-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
  --motion-base: 240ms cubic-bezier(0.2, 0, 0, 1);
}

.light,
.dark {
  --primary: var(--md-sys-color-primary);
  --on-primary: var(--md-sys-color-on-primary);
  --primary-container: var(--md-sys-color-primary-container);
  --on-primary-container: var(--md-sys-color-on-primary-container);
  --secondary: var(--md-sys-color-secondary);
  --on-secondary: var(--md-sys-color-on-secondary);
  --secondary-container: var(--md-sys-color-secondary-container);
  --on-secondary-container: var(--md-sys-color-on-secondary-container);
  --tertiary: var(--md-sys-color-tertiary);
  --error: var(--md-sys-color-error);
  --on-error: var(--md-sys-color-on-error);
  --error-container: var(--md-sys-color-error-container);
  --background: var(--md-sys-color-background);
  --on-background: var(--md-sys-color-on-background);
  --surface-base: var(--md-sys-color-surface);
  --on-surface: var(--md-sys-color-on-surface);
  --surface-variant: var(--md-sys-color-surface-variant);
  --on-surface-variant: var(--md-sys-color-on-surface-variant);
  --outline: var(--md-sys-color-outline);
  --outline-variant: var(--md-sys-color-outline-variant);
  /* BONUS (ultra utile) */
  --surface-low: var(--md-sys-color-surface-container-low);
  --surface: var(--md-sys-color-surface-container);
  --surface-high: var(--md-sys-color-surface-container-high);
  --inverse-surface: var(--md-sys-color-inverse-surface);
  --inverse-on-surface: var(--md-sys-color-inverse-on-surface);
}

:root {
  --font-family: "Noto Sans", sans-serif;
  --font-family-display: "Roboto Condensed", sans-serif;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--on-surface) !important;
  transition: background-color 9999s ease-in-out 0s;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--background);
  color: var(--on-background);
}

.login-container {
  width: min(100%, 420px);
  padding: 32px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  box-shadow: var(--shadow-2);
}
.login-container h2 {
  margin: 0 0 24px;
  font-family: var(--font-family-display);
  font-size: var(--text-2xl);
}
.login-container form {
  display: grid;
  gap: 16px;
}
.login-container label {
  display: block;
  margin-bottom: 6px;
  color: var(--on-surface-variant);
  font-size: var(--text-sm);
}
.login-container input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--on-surface);
  font: inherit;
}
.login-container input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.login-container button {
  min-height: 46px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

#login-error {
  min-height: 1.25rem;
  margin-top: 16px;
}

/*# sourceMappingURL=login.css.map */