/* elements.dev brand voice: sky/cornflower accent, mono as the default UI font.
   @elements/style ships customer-voice defaults; we only override what changes. */

:root {
  --accent:       var(--sky);
  --accent-deep:  var(--sky-deep);
  --accent-soft:  var(--sky-soft);
  --accent-dot:   var(--sky-dot);
  --accent-wash:  var(--sky-wash);

  --font-ui:    var(--font-mono);
  --font-body:  var(--font-mono);

  --input-border-focus: var(--accent-deep);
}

/* Mobile h1 size — one place for every page-level heading so we don't
   whack-a-mole them individually. Keep desktop sizes per-page (hero is
   bigger than a plain page header, auth cards use a compact heading,
   etc.); below 700px everything collapses to the same 2.375rem / 38px
   with a snug line-height so a wrapped heading doesn't tower.

   `html` prefix lifts specificity to (0,1,1) so this wins over the
   unconditional `.hero-title`/`.install-title` rules in each page's
   style.css — those get imported first and would otherwise come later
   in source order. */
@media (max-width: 700px) {
  html .install-title,
  html .auth-title,
  html .account-title,
  html .learn-title,
  html .purchase-main .page-head h1 {
    font-size:   2.2em;
    line-height: 1.1;
  }

  /* Home hero is the one exception — display type that should feel
     larger than a page header, even on mobile. */
  html .hero-title {
    font-size:   3.2em;
    line-height: 1.05;
  }

  /* Uniform 1.5rem horizontal gutter across every page on mobile. Upstream
     @elements/style ships these shells with 2rem (var(--space-8)); we tighten
     them slightly so content isn't pushed needlessly inward on phones. Pages
     that own their own container (purchase, signin, dashboard) set the same
     1.5rem directly. */
  .shell-narrow,
  .shell-prose,
  .shell-marketing,
  .shell-wide {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }
}