/* =========================================================================
   app.css — base layout + element styles, consuming ONLY semantic tokens.
   Cascade layers keep specificity predictable: reset < base < components.
   ========================================================================= */
@layer base {
  html {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 100%;
    accent-color: var(--color-primary);
  }

  body {
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    /* A whisper of warm accent at the top edge — premium, not decorative. */
    background:
      radial-gradient(1100px 560px at 88% -12%,
        color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 62%),
      var(--color-bg);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-optical-sizing: auto; /* Fraunces opsz: refined at display sizes */
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
    letter-spacing: var(--tracking-display);
  }

  a {
    color: var(--color-link);
    text-underline-offset: .15em;
  }

  .shell {
    width: min(100% - 2 * var(--space-4), var(--width-shell));
    margin-inline: auto;
  }

  .site-main {
    flex: 1;
    padding-block: var(--space-section);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
  }
  /* Editorial leading rule — a refined detail that lifts every section header. */
  .eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: .5;
  }

  .lede {
    color: var(--color-text-muted);
    font-size: var(--text-md);
    max-width: var(--width-prose);
  }

  .tagline {
    font-family: var(--font-display);
    color: var(--color-text-muted);
  }

  /* A simple pill the placeholder uses to show integration/health status. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
}