/* Base element styles, driven entirely by design tokens (static/css/tokens.css). */

body {
  background: var(--ui-background);
  color: var(--ui-foreground);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.25;
}

a {
  color: var(--ui-primary);
}

a:hover {
  text-decoration: underline;
}

/* Visible focus (PRD §19) — never suppressed, only restyled. */
:focus-visible {
  outline: 2px solid var(--ui-ring);
  outline-offset: 2px;
}

.messages {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ui-border);
}

/* Structural shells for the base layouts (templates/layouts/*.html).
 * Visual polish belongs to the UI component catalogue — this is just enough
 * for every page to be usable and legible before that lands. */

.app-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
}

.app-navbar__brand {
  font-weight: 600;
}

.app-navbar__account {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-footer {
  padding: 1.5rem;
  color: var(--ui-muted-foreground);
  border-top: 1px solid var(--ui-border);
}

.app-shell,
.marketing-layout {
  max-width: 60rem;
  margin-inline: auto;
  padding: 2rem 1.5rem;
}

.auth-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-layout__panel {
  width: 100%;
  max-width: 24rem;
}

.auth-layout__brand {
  display: block;
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  text-align: center;
  text-decoration: none;
}

.auth-layout__header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.auth-layout__header h1 {
  font-size: 1.5rem;
}

.auth-layout__subtitle {
  margin-top: 0.5rem;
  color: var(--ui-muted-foreground);
  font-size: 0.875rem;
}

.auth-layout__submit {
  width: 100%;
  margin-top: 0.25rem;
}

.auth-layout__links {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ui-muted-foreground);
}

.auth-layout__links p + p {
  margin-top: 0.5rem;
}

.auth-layout__links a {
  color: var(--ui-foreground);
  font-weight: 500;
}