/* ===========================================================
   GozAround marketing design tokens.
   Loaded before public.css, home.css and tailored.css, so every
   marketing surface draws from one vocabulary. Product screens
   (admin.css) keep their own teal-anchored token set.

   Written 2026-09-08 in the visual de-genericization pass. The
   round replaced four typefaces and re-tuned the warm neutrals.
   Read this header before changing a value here: several of them
   are contrast floors, not preferences.

   TYPE
     Newsreader      the argument: h1, h2, pull quotes, big numerals
     Hanken Grotesk  everything else: prose, labels, buttons, UI,
                     tabular figures, and all SVG diagram text
   The serif never appears inside an SVG.

   Retired in this round and not to be reintroduced:
     Inter and Space Grotesk  the most-flagged AI-default pairing
     DM Serif Display         a common AI-generator default
     Source Serif 4           safe, but deliberately characterless

   COLOUR
     Burnt orange is unchanged and is still the only action colour.
     The warm neutrals moved: the old #fff6eb cream was the yellow
     that made the site read as generated warm-minimal. White is now
     the ground, cream is a band. Keep cream under roughly 15% of any
     viewport, the same way teal is held under 10%.
     Teal remains the semantic GozAround colour for diagrams and
     GozAround-as-actor accents only.
   =========================================================== */

:root {
  /* ---------- ground: white dominant, cream demoted to a band ---------- */
  --white:  #ffffff;   /* page default */
  --paper:  #faf9f7;   /* alternating sections */
  --cream:  #f7f4ee;   /* bands and the hero only */
  --sand:   #ece7dd;   /* the heavier band */

  /* ---------- ink ---------- */
  --ink:    #211d18;   /* dark grounds, footer, headings on light */
  --ink-2:  #35302a;   /* the lighter dark ground */
  --text:   #35302a;   /* default body ink */
  --muted:  #5c564d;   /* secondary prose. 7.26:1 on white */
  --line:   #e5e0d7;   /* card and panel hairline */
  --line-2: #d5cec1;   /* the heavier rule that separates argument blocks */

  /* ---------- the owned colour. Burnt, never coral. ----------
     --orange sets fills, marks, rules and the logo. At 3.23:1 on
     white it must never carry body-size text on a light ground.
     --orange-ink is the text tone: it clears 4.5:1 on white, paper,
     cream, sand, orange-soft and teal-soft, which is where every
     uppercase label on the site actually sits. */
  --orange:       #df7103;
  --orange-ink:   #994d00;
  --orange-deep:  #b25a00;  /* primary button ground */
  --orange-hover: #8f4800;
  --orange-soft:  #f6e6d3;
  --orange-light: #f6b67a;  /* on dark grounds only */

  /* ---------- cool: GozAround's own domain, product hexes verbatim ----------
     --teal-ink mirrors --orange-ink: --teal is 4.24:1 on --teal-soft, which is
     exactly where every teal status chip on the site sits, so the chips take
     the darker tone and --teal stays for fills, bars and rules. */
  --teal:       #0f7d72;
  --teal-ink:   #0d6d64;
  --teal-deep:  #16383b;
  --teal-soft:  #e6eeec;
  --teal-light: #7fb8ae;

  /* ---------- semantic ---------- */
  --pos:  #3f7d54;
  --warn: #8a6415;
  --neg:  #a33a3a;

  /* ---------- ink on dark grounds ---------- */
  --on-dark:        #ffffff;
  --on-dark-prose:  #d8cdbb;
  --on-dark-muted:  #a89f92;
  --on-dark-line:   #453e35;

  /* ---------- type ---------- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* one step per role. Half-pixel sizes and per-section clamps were
     removed in this round; do not reintroduce either. */
  --fs-label: 12px;
  --fs-micro: 13px;
  --fs-sm:    15px;
  --fs-body:  17px;
  --fs-lede:  20px;
  --fs-h3:    clamp(21px, 2.6vw, 26px);
  --fs-h2:    clamp(28px, 4.6vw, 42px);
  --fs-h1:    clamp(34px, 4.5vw, 52px);

  --ls-label: .12em;   /* the ONE uppercase-label tracking */
  --ls-tight: -.01em;

  --lh-tight: 1.14;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  /* ---------- spacing: 8px grid ---------- */
  --s-1: 8px;   --s-2: 12px;  --s-3: 16px;  --s-4: 24px;  --s-5: 32px;
  --s-6: 40px;  --s-7: 56px;  --s-8: 72px;  --s-9: 96px;  --s-10: 128px;

  --pad-section: 96px;
  --pad-tight:   64px;
  --pad-loose:   128px;

  /* ---------- layout ---------- */
  --wrap:        1120px;
  --wrap-narrow: 780px;
  --gutter:      24px;
  --nav-h:       72px;
  --hero-top:    112px;   /* nav height plus one step */

  /* ---------- geometry ---------- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* one lift tier for mock cards and panels, one hairline tier for
     the nav. No orange-tinted glows and no hover shadow-bloom. */
  --shadow:    0 24px 48px -32px rgba(33, 29, 24, .45);
  --shadow-sm: 0 1px 2px rgba(33, 29, 24, .06);

  /* ---------- motion: colour, border and shadow only ---------- */
  --t: 150ms;
}

@media (max-width: 820px) {
  :root {
    --pad-section: 64px;
    --pad-tight:   48px;
    --pad-loose:   80px;
    --hero-top:    100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}