/* Locato client app — design-system tokens with fallbacks (robust if a token is absent). */
.app {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg, #111);
  color: var(--color-text, #f2f2f2);
  font-family: var(--font-body-family, ui-monospace, monospace);
  font-weight: var(--font-body-weight, 300);
}
.app__main {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-6, 2rem);
}

/* Shared brand wordmark — Freight serif, italic (graphic treatment). */
.auth__brand,
.dash__brand {
  margin: 0;
  color: var(--color-text-brand, inherit);
  font-family: var(--font-heading-family, Georgia, serif);
  font-style: italic;
  font-weight: 300;
}

/* --- Login --- */
.auth {
  max-width: 22rem;
  margin: 12vh auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}
.auth__brand { font-size: 2.5rem; }
.auth__tagline { margin: 0 0 var(--space-3, 0.75rem); color: var(--color-text-muted, #8a8a8a); }
.auth__error {
  margin: 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid var(--color-danger, #c0392b);
  color: var(--color-danger, #e06b5e);
}
.auth__form { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
.auth__field { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); }
.auth__label { font-size: 0.8rem; color: var(--color-text-muted, #8a8a8a); }
.auth__input {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: var(--color-surface, #1c1c1c);
  border: 1px solid var(--color-border, #333);
  color: inherit;
  font: inherit;
}
.auth__input:focus { outline: 2px solid var(--color-text-brand, #888); outline-offset: 1px; }

/* Buttons / CTAs share one look. */
.auth__submit,
.dash__connect {
  display: inline-block;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  background: var(--color-text-brand, #f2f2f2);
  color: var(--color-bg, #111);
  border: 0;
  font: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

/* --- Dashboard --- */
.dash__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6, 2rem);
}
.dash__brand { font-size: 1.75rem; }
.dash__user { display: flex; align-items: center; gap: var(--space-3, 0.75rem); }
.dash__business { color: var(--color-text-muted, #8a8a8a); }
.dash__logout,
.dash__disconnect {
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  background: transparent;
  border: 1px solid var(--color-border, #333);
  color: var(--color-text-muted, #8a8a8a);
  font: inherit;
  cursor: pointer;
}

.dash__panel {
  padding: var(--space-5, 1.5rem);
  border: 1px solid var(--color-border, #333);
  background: var(--color-surface, #1c1c1c);
}
.dash__title {
  margin: 0 0 var(--space-3, 0.75rem);
  font-family: var(--font-heading-family, Georgia, serif);
  font-weight: 400;
}
.dash__status { margin: 0 0 var(--space-2, 0.5rem); font-weight: 500; }
.dash__status--on { color: var(--color-success, #4caf72); }
.dash__status--off { color: var(--color-text-muted, #8a8a8a); }
.dash__note { margin: 0 0 var(--space-4, 1rem); color: var(--color-text-muted, #8a8a8a); }