/* ============================================================================
   @rainyseason/shell — BASE
   Reset, body, the heading system, the Swiss grid and the frame. Requires
   tokens.css. Keep in step with product/ui/shell.css (the locked source).
   ============================================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  background: var(--g);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  word-spacing: var(--word-space);
  -webkit-font-smoothing: antialiased;
}

/* Headings — use the element and you get the system. H1 natural casing,
   tight track. H2–H3 lowercase titles at 0. H4 is the eyebrow-size heading.
   500 is the house heavy. Space between headings comes from layout gaps,
   never heading margins. */
h1, h2, h3, h4, .brand-word { word-spacing: var(--word-space-head); }
h1 {
  margin: 0; font-size: var(--t-h1); font-weight: var(--w-medium);
  letter-spacing: var(--track-tight); line-height: var(--lh-title); color: var(--ink);
}
h2 {
  margin: 0; font-size: var(--t-h2); font-weight: var(--w-medium);
  letter-spacing: 0; line-height: var(--lh-head);
  text-transform: lowercase; color: var(--ink);
}
h3 {
  margin: 0; font-size: var(--t-h3); font-weight: var(--w-medium);
  letter-spacing: 0; line-height: 1.35;
  text-transform: lowercase; color: var(--ink);
}
h4 {
  margin: 0; font-size: var(--t-h4); font-weight: var(--w-regular);
  letter-spacing: var(--track-eyebrow); line-height: 1.4;
  text-transform: lowercase; color: var(--ink-3);
}
.rs-acronym { text-transform: uppercase; letter-spacing: 0; }
:is(h1, h2, h3, h4) .rs-acronym { text-transform: uppercase; letter-spacing: 0; }

button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(0, 157, 255, 0.38); color: var(--ink); }

/* The page grid — Swiss, 8 segments. Spans of 2/4/8; no thirds. */
.grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0 20px;
}

/* The frame — the whole app lives in one centred clamp; past --frame the
   sides are the base ground. Full-bleed means the width of the frame. */
.shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: var(--frame);
  margin: 0 auto;
}