/* GENERATED from sohow-brand@2f6ac88 (2026-10-01) by scripts/sync-brand.sh — DO NOT EDIT. Master: sohow-brand. Record: brand Saga e-b0aa776f87df */
/* =============================================================
   So How brand — MASTER tokens. Mobile-first. Minimal.
   Edit brand values ONLY here (and primitives/*.css). Every site and
   tool takes a version-stamped COPY at deploy (e.g. sohow-site
   scripts/sync-brand.sh) — never hand-edit a copy, never put :root
   token values in a page. These colours are the whole palette.
   Rules + why: brand Saga front door e-b0aa776f87df.
   ============================================================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@700&family=Nunito:wght@400;600&display=swap');

/* =============================================================
   TOKENS
   ============================================================= */

:root {
  /* Colours */
  --bg:       #fff4e9;
  --surface:  #e7d8c9;
  --text:     #1A1008;
  --muted:    #6b5a48;
  --secondary:#9eab9a;
  --accent:   #8f0000;
  --error:    #c0392b;

  /* Surface layer — the behavioural half of the system (see sohow-infra/surface/contract.json).
     Promoted 2026-07-28 from the dialogic prototype, where these were already doing
     real work with no brand home. --sage-legible is the readable sage for helper /
     eyebrow text on cream (--secondary is too pale for copy); telltones vendored it
     locally as --tt-secondary-strong before this promotion. */
  --card:        #fbe9d6;           /* thread cards / input surfaces on cream */
  --accent-soft: #b34a45;           /* secondary accent — pocket borders, quiet labels */
  --line:        rgba(107,90,72,.3);/* hairlines, zone dividers */
  --sage-legible:#6f8067;           /* helper gloss + speaker eyebrow */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;
}

/* =============================================================
   BASE RESET
   ============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

/* =============================================================
   TYPOGRAPHY
   ============================================================= */

h1, h2 {
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }

p {
  font-size: 18px;
  line-height: 1.6;
}

label {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: block;
}

small {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  display: block;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  opacity: 0.8;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

strong { font-weight: 600; }
em     { font-style: italic; }