/*
 * Story 111: the site-wide base theme built from tokens.css's custom
 * properties -- every value here is a var(), not a literal, so this file
 * (and every component that follows it) stays a single source of truth away
 * from the actual design decisions.
 */

/* Every page here is a plain server-rendered document -- no client-side router, every navigation
   (including a form's own POST-then-redirect, e.g. "Send to a friend") is a real full-page reload.
   Without this, that reload is a hard cut: the whole page blanks, then the new one appears, most
   noticeable right after a form post that took a moment (an actual SMTP send, say) to get there.
   Opts every same-origin navigation into the browser's native crossfade instead, with no
   JavaScript at all -- an unsupported browser (this @-rule isn't recognised) just ignores it and
   gets exactly today's hard cut, so this is purely additive, never a regression. */
@view-transition {
  navigation: auto;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

/* No page had a width constraint before this -- every page (Visual Builder
   composed or hand-built) ran full-bleed edge to edge, confirmed by a real
   local run. One shared shell here fixes it site-wide instead of each page
   inventing its own. */
.page-shell {
  max-width: 35rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
  /* At least a full screen tall, with the page's own content taking up the slack, so
     whatever follows it (the sticky "My list" bar where there is one, then the footer) sits
     at the bottom of the browser window even on a page too short to scroll. On a longer page
     the bar stays pinned to the window's bottom edge until the end of the content, where it
     rests, and the footer follows below it. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page-shell__content {
  flex: 1 0 auto;
}

/* Explicit sizes here, not left to the browser's UA stylesheet -- these
   varied unpredictably by nesting depth (headings inside sectioning
   elements shrink under the HTML spec's own rules), confirmed live: every
   heading on the Visual Builder-composed homepage rendered at whatever
   size the browser felt like rather than the reference design's scale.
   Components with their own more specific sizing (marketing-hero__headline,
   process-step__title, etc.) override these via higher-specificity
   classes. */
h1,
h2,
h3 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: var(--space-6) 0 var(--space-4);
}

h1 {
  font-size: 2rem;
  border-bottom: var(--border-width-rule) solid var(--color-border);
  padding-bottom: var(--space-3);
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.125rem;
}

p,
ul,
ol {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-accent);
}

hr {
  border: none;
  border-top: var(--border-width-rule) solid var(--color-border);
  margin: var(--space-6) 0;
}

button,
input,
select {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-none);
}

button {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border: var(--border-width-rule) solid var(--color-accent);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

img {
  border-radius: var(--radius-none);
}