/*
   Brand color: a dark slate-teal instead of Lumo's default bright blue,
   applied as the same hsl()/hsla() shade scheme Lumo itself uses so every
   component that reads --lumo-primary-color-* (buttons, links, focus rings,
   RouterLink active state, ...) picks it up automatically, in both light and
   dark mode -- only the ACCENT hue changes here, Lumo's own light/dark base
   and text colors (toggled via the html[theme="dark"] switch below, see
   MainLayout) are left alone.
*/
html {
  --lumo-primary-color: hsl(199, 65%, 30%);
  --lumo-primary-color-50pct: hsla(199, 65%, 30%, 0.5);
  --lumo-primary-color-10pct: hsla(199, 65%, 30%, 0.1);
  --lumo-primary-text-color: hsl(199, 70%, 32%);
  --lumo-primary-contrast-color: #fff;
}

html[theme~="dark"] {
  /* Same hue, only slightly lifted (30% -> 42% lightness) -- enough to stay
     readable against a dark background without turning into a bright,
     un-"darker" accent, same reasoning Lumo's own dark palette applies a
     smaller lightness bump to its own colors rather than a big one. */
  --lumo-primary-color: hsl(199, 60%, 42%);
  --lumo-primary-color-50pct: hsla(199, 60%, 42%, 0.5);
  --lumo-primary-color-10pct: hsla(199, 60%, 42%, 0.15);
  --lumo-primary-text-color: hsl(199, 70%, 60%);
  --lumo-primary-contrast-color: #fff;
}

/* Example: CSS class name to center align the content . */
.centered-content {
  margin: 0 auto;
  max-width: 250px;
}

/* Example: the style is applied only to the textfields which have the `bordered` class name. */
vaadin-text-field.bordered::part(input-field) {
  box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
  background-color: var(--lumo-base-color);
}