@font-face {
  font-family: "Roboto Variable";
  src: url("/mealvue/roboto-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Authelia sets its tokens on html and body [data-theme]; a doubled attribute outranks them. */
:root, [data-theme="light"][data-theme] {
  color-scheme: light;
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.25);
  --card: var(--background);
  --card-foreground: var(--foreground);
  --primary: oklch(0.553 0.195 38.402);
  --primary-foreground: oklch(0.98 0.016 73.684);
  --muted-foreground: oklch(0.553 0.013 58.071);
  --border: oklch(0.923 0.003 48.717);
  --input: var(--border);
  --ring: var(--primary);
  --radius: 0.625rem;
  --mealvue-link: var(--primary);
  --mealvue-error: oklch(0.505 0.213 27.518);
}

:root.dark, [data-theme="dark"][data-theme], [data-theme="grey"][data-theme], [data-theme="oled"][data-theme] {
  color-scheme: dark;
  --background: oklch(0.147 0.004 49.25);
  --foreground: oklch(0.985 0.001 106.423);
  --card: oklch(0.216 0.006 56.043);
  --primary: oklch(0.47 0.157 37.304);
  --muted-foreground: oklch(0.709 0.01 56.259);
  --border: oklch(1 0 0 / 15%);
  --mealvue-link: oklch(0.78 0.13 50);
  --mealvue-error: oklch(0.704 0.191 22.216);
}

@media (prefers-color-scheme: dark) {
  :root:has(.mealvue-signup) {
    color-scheme: dark;
    --background: oklch(0.147 0.004 49.25);
    --foreground: oklch(0.985 0.001 106.423);
    --card: oklch(0.216 0.006 56.043);
    --primary: oklch(0.47 0.157 37.304);
    --muted-foreground: oklch(0.709 0.01 56.259);
    --border: oklch(1 0 0 / 15%);
    --mealvue-link: oklch(0.78 0.13 50);
    --mealvue-error: oklch(0.704 0.191 22.216);
  }
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--foreground);
  background: var(--background) url("/mealvue/auth-wallpaper.webp") center / cover fixed;
  font-family: "Roboto Variable", "Roboto", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--primary); color: var(--primary-foreground); }
:focus-visible { outline: 2px solid var(--mealvue-link); outline-offset: 3px; }
input { caret-color: var(--mealvue-link); font-size: 1rem; }
.mealvue-stage { min-height: 100svh; padding: 1.5rem; }
.mealvue-card {
  width: 100%;
  max-width: 444px;
  margin: auto;
  padding: 2rem;
  text-align: left;
  background: var(--background);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.mealvue-card h1, .mealvue-card h2, .mealvue-card h3 {
  color: var(--foreground);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
.mealvue-card :where(input:not([type="checkbox"]):not([type="radio"])) {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) * 0.8);
  background: var(--background);
  color: var(--foreground);
}
.mealvue-card input:focus-visible { outline-offset: 2px; }
.mealvue-card input[aria-invalid="true"] { border-color: var(--mealvue-error); }
.mealvue-card label.text-primary { color: var(--mealvue-link); }
.mealvue-card label.text-destructive { color: var(--mealvue-error); }
.mealvue-card #sign-in-button, .mealvue-primary {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: calc(var(--radius) * 0.8);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-weight: 500;
  text-transform: none;
  cursor: pointer;
}
.mealvue-card #sign-in-button:hover, .mealvue-primary:hover { filter: brightness(0.93); }
.mealvue-primary:disabled { cursor: wait; opacity: 0.65; }
.mealvue-card a, .mealvue-card #reset-password-button { color: var(--mealvue-link); }
.mealvue-create-account { display: block; margin-top: 1.25rem; padding: 0.75rem; text-align: center; }
.mealvue-create-account, .mealvue-signin a { text-decoration: underline; text-underline-offset: 4px; }
.mealvue-signup .mealvue-stage { display: flex; align-items: center; justify-content: center; }
.mealvue-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; font-size: 1.125rem; font-weight: 600; }
.mealvue-signup h1 { margin: 0 0 0.5rem; }
.mealvue-description { margin: 0 0 1.5rem; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; }
.mealvue-field { margin-bottom: 1rem; }
.mealvue-field label { display: block; margin-bottom: 0.5rem; color: var(--foreground); font-size: 0.875rem; font-weight: 500; }
.mealvue-field input { padding: 0.65rem 0.75rem; }
.mealvue-hint { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.5; }
.mealvue-error { color: var(--mealvue-error); font-size: 0.875rem; line-height: 1.5; }
.mealvue-signin { margin: 1.5rem 0 0; font-size: 0.875rem; line-height: 1.5; text-align: center; }
.mealvue-signin a { display: inline-block; padding-block: 0.75rem; }
.mealvue-secondary { min-height: 44px; padding: 0.5rem 0; border: 0; background: none; color: var(--mealvue-link); font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.mealvue-secondary:disabled { opacity: 0.65; cursor: default; }
#signup-code-email { overflow-wrap: anywhere; }
[hidden] { display: none !important; }

@media (max-width: 480px) {
  .mealvue-stage { padding: 1rem; }
  .mealvue-card { padding: 1.5rem; }
}