:root {
  /* ==========================================================================
     Intuo Event Registration – site-wide styles
     Warm neutral palette with green brand accents.
     ========================================================================== */

  /* --- Design tokens (CSS custom properties) --- */
    --text: #1d1b18;
    --muted: #5f5a52;
    --brand: #1f5c52;
    --brand-strong: #133832;
    --border: #d7cbb8;
    --danger: #8e2f2f;
  }

  /* --- Base / reset --- */
  html {
    font-size: 16px;
    min-height: 100%;
  }

  body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    /* Subtle radial highlight in the top-right corner over a warm gradient */
    background:
      radial-gradient(circle at top right, rgba(31, 92, 82, 0.18), transparent 24rem),
      linear-gradient(180deg, #f8f4ec 0%, #efe7d8 100%);
  }

  /* --- Navigation bar --- */
  .app-nav {
    background: linear-gradient(90deg, var(--brand-strong), var(--brand));
  }

  /* --- Shared card chrome (hero, info, form, status) --- */
  .hero,
  .info-card,
  .form-card,
  .status-card {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: rgba(255, 253, 248, 0.94);
    box-shadow: 0 1rem 2rem rgba(29, 27, 24, 0.08);
  }

  /* --- Hero section --- */
  .hero {
    padding: 2.5rem;
    margin-bottom: 1.5rem;
  }

  .hero-compact {
    padding-bottom: 1.75rem;
  }

  /* Small uppercase label above a hero title */
  .eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
  }

  .lead,
  .muted {
    color: var(--muted);
  }

  /* --- Card grid (landing page) --- */
  .card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .info-card,
  .form-card,
  .status-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  .cta-link {
    font-weight: 700;
    color: var(--brand);
  }

  /* --- Responsive grids for metadata, form fields, and results --- */
  .meta-grid,
  .field-grid,
  .result-grid {
    display: grid;
    gap: 1rem;
  }

  .meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 1.5rem;
  }

  /* Shared label style for metadata captions and definition list terms */
  .meta-label,
  dt {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .field-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* Span the full grid width (e.g. email field, wide result rows) */
  .field-wide,
  .result-wide {
    grid-column: 1 / -1;
  }

  /* --- Validation & form controls --- */
  .validation-summary ul {
    margin: 0 0 1rem;
    color: var(--danger);
  }

  .btn-primary {
    border-color: var(--brand);
    background-color: var(--brand);
  }

  .btn-primary:hover,
  .btn-primary:focus {
    border-color: var(--brand-strong);
    background-color: var(--brand-strong);
  }

  /* --- Footer --- */
  .footer {
    padding: 1rem 0 2rem;
  }

  code {
    color: var(--brand-strong);
  }