:root {
  --app-drawer-width: 180px;
  --lumo-font-size: 0.875rem;
  --vaadin-login-form-width: 28em;

  /* Tighter spacing tokens for dense layout */
  --lumo-space-xs:  0.125rem;
  --lumo-space-s:   0.25rem;
  --lumo-space-m:   0.5rem;
  --lumo-space-l:   0.75rem;
  --lumo-space-xl:  1rem;

  /* Slightly smaller component sizes */
  --lumo-size-xs:   1.5rem;
  --lumo-size-s:    1.75rem;
  --lumo-size-m:    2rem;
  --lumo-size-l:    2.25rem;
}

html {
  --lumo-font-size: 0.875rem;
  --lumo-size-m: 2rem;
  font-size: var(--lumo-font-size);
}

vaadin-app-layout::part(drawer) {
  width: var(--app-drawer-width);
}

/* Wide screens: give more room to content */
@media (min-width: 1440px) {
  :root {
    --app-drawer-width: 200px;
    --lumo-font-size: 0.9rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --app-drawer-width: 210px;
    --lumo-font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  :root {
    --app-drawer-width: 240px;
  }
  vaadin-app-layout::part(drawer) {
    width: var(--app-drawer-width);
  }
}