/* vdg-control-web — app-level styling on top of the shared tokens.
   VDG brand: tenants see VDG's brand here (definition §8), light + dark. */

:root {
  --accent: #0f6e5f; /* VDG brand green */
}

:root[data-theme='dark'] {
  --accent: #3fbfa8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --accent: #3fbfa8;
  }
}

.screen__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-end: var(--space-4);

  & h2 {
    margin: 0;
    flex: 1;
  }
}

/* Login card, centered on the raw page (no shell yet). */
.login {
  max-width: 22rem;
  margin: 15vh auto 0;
  padding: var(--space-5);
  background: var(--bg-raised);
  border-radius: var(--radius-2);
  box-shadow: var(--elevation-2);
  display: grid;
  gap: var(--space-3);

  & h1 {
    margin: 0 0 var(--space-2);
    font: var(--type-title);
  }
}

button.danger {
  background: var(--danger);
  color: var(--accent-contrast);
}