/* ===================================================================
   tokens.css — design system for justaskavet.com (Willow saved-chat lander)
   Navy + warm off-white. Poppins only. Single 640px column.
   Spec: lander-build-prompt_v1.md §2
   =================================================================== */

:root {
  /* ---- color ---- */
  --navy:          #16264A;  /* primary brand, links, CTA button         */
  --navy-hover:    #0F1B3D;  /* CTA hover state                          */
  --ink:           #1A1A1A;  /* body text                                */
  --muted:         #6B6B66;  /* metadata, timestamps, byline             */
  --bg:            #FAFAF7;  /* page background — warm off-white          */
  --vet-bubble:    #FFFFFF;  /* Dr. Yates's bubble background             */
  --vet-border:    #E5E5E0;  /* vet bubble border (1px)                  */
  --owner-bubble:  #F1EFEA;  /* Hannah's bubble background (warm grey)    */
  --accent-aqua:   #E8F1F2;  /* used ONCE — Yates names AquaOne           */
  --rule:          #E5E5E0;  /* dividers                                 */

  /* ---- type scale (desktop) ---- */
  --fs-h1-1:   48px;  /* H1 line 1 — the situation        (600) */
  --fs-h1-2:   36px;  /* H1 line 2 — the plea             (500) */
  --fs-h2:     28px;  /* section headings                 (600) */
  --fs-body:   18px;  /* body                             (400) */
  --fs-chat:   16px;  /* chat bubble body                 (400) */
  --fs-meta:   12px;  /* timestamps / metadata            (500) */
  --fs-byline: 14px;  /* byline                           (400) */
  --fs-cta:    16px;  /* CTA button                       (600) */

  /* ---- line-height ---- */
  --lh-h1:   1.15;
  --lh-h2:   1.3;
  --lh-body: 1.65;
  --lh-chat: 1.55;

  /* ---- spacing rhythm ---- */
  --sp-para:    24px;  /* between paragraphs               */
  --sp-section: 48px;  /* between sections                 */
  --sp-chat:    72px;  /* above/below the chat module      */

  /* ---- layout ---- */
  --col:        640px; /* max content width                */
  --pad-mobile: 24px;
  --pad-tablet: 32px;

  --radius-bubble: 16px;
  --radius-photo:  12px;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- mobile type scale (≤640px) ---- */
@media (max-width: 640px) {
  :root {
    --fs-h1-1: 32px;
    --fs-h1-2: 24px;
    --fs-h2:   22px;
    --fs-body: 16px;
    /* --fs-chat / --fs-meta / --fs-byline unchanged per spec */
  }
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); }
button { font-family: var(--font); }

/* ---- shared metadata / timestamp treatment ---- */
.meta {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}