/* JayLM Studio: the token layer the Home and Pricing are built on. Both pages name their colours by role (ground, text,
   line, signal…) rather than by value; this file gives those roles the studio's paper palette from site.css and the
   shared spacing and type scale. Loads after site.css and pages.css on the Home and Pricing only, before css/home.css or
   css/pricing.css. The shared bar, footer, skip link and dock keep their site.css look on every page. */

.page-home, .page-pricing {
  --ground: var(--paper);          /* the page */
  --ground-2: var(--paper-2);      /* the second surface: the ask, the chosen chip */
  --text: var(--ink);              /* headings, links, labels */
  --text-2: var(--ink-2);          /* running text */
  --muted: #5d5952;
  --on-light: var(--paper);        /* text on the ink-filled button */
  --signal: #e8461f;               /* the one accent */
  --signal-text: #b83214;          /* the accent for small text: 5.2:1 on the paper, where --signal reaches 3.4:1 */
  --line: #cdc6b8;
  --line-strong: #a9a398;

  --col-gap: 24px;
  --pad-1: 48px; --pad-2: 64px; --pad-3: 96px;
  --t-h2: clamp(2.25rem, 4vw, 3.6rem);
  --t-lede: 1.25rem;
  --t-body: 1.0625rem;
  --t-label: 0.8125rem;
  --t-meta: 0.9375rem;

  background: var(--ground);
  color: var(--text);
}
@media (min-width: 900px) { .page-home, .page-pricing { --pad-1: 64px; --pad-2: 96px; --pad-3: 128px; } }
.page-home main, .page-pricing main { font-variation-settings: normal; }
