/*
 * app.css — base element styles + legacy utility classes.
 *
 * After the UX Consistency Audit, all competing component styles
 * (.portal-btn, .portal-badge, .portal-card, .portal-progress,
 * .portal-form, .portal-table, .portal-header, .portal-main,
 * .portal-footer, .portal-flash, .portal-log, .portal-hero, etc.)
 * have been removed. The component library (components/*.css via
 * components.css) and shell.css own all component and shell styling.
 *
 * What remains here:
 *   - body element defaults (token-driven, D5)
 *   - .portal-inline-form utility (structural only, no visual values)
 *   - .landing-hero (logged-out hero, token-driven)
 *   - .portal-page semantic wrapper (no visual styles, used by templates)
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-fg);
  line-height: var(--lh-base);
}

/* Semantic page wrapper — no visual styles; layout comes from .app-main */
.portal-page {
}

/* Inline form utility — structural only (no visual values, D5-safe) */
.portal-inline-form {
  display: inline;
  margin: 0;
}

/* ----------------------------------------------------------------------- *
 * Landing hero — logged-out entry page (token-driven, D5)
 * ----------------------------------------------------------------------- */

.landing-hero {
  max-width: 35rem;
  margin: var(--space-8) auto;
  padding: 0 var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.landing-hero__logo {
  color: var(--color-accent);
  line-height: 0;
}

.landing-hero__title {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}

.landing-hero__subtitle {
  margin: 0;
  color: var(--color-fg-muted);
  font-size: var(--fs-lg);
}