/* ============================================================
   Body Signals - design tokens
   The ONLY place raw colour/size values are allowed to appear.
   Every other stylesheet references var(--*). If you find
   yourself typing a hex code elsewhere, add a token instead.
   ============================================================ */

:root {
  /* ---- brand palette -------------------------------------- */
  --c-forest:      #2F3E36;   /* deepest green - body text, dark surfaces */
  --c-sage-deep:   #4A6355;   /* headings, primary buttons */
  --c-sage:        #7C9070;   /* growth, success, "yes" */
  --c-sage-tint:   #F0F3EC;   /* selected-state fill */
  --c-terra:       #C67B5C;   /* accent, attention, eyebrow labels */
  --c-terra-tint:  #FBF3EE;
  --c-terra-soft:  #E8D5CB;

  /* ---- surfaces ------------------------------------------- */
  --c-cream:       #F7F4ED;   /* app background */
  --c-cream-2:     #EFEAE0;   /* recessed fill */
  --c-paper:       #FFFDF9;   /* cards */
  --c-line:        #E2DACE;   /* hairlines, unselected borders */
  --c-line-strong: #CFC7B8;

  /* ---- text ----------------------------------------------- */
  --c-ink:         #2F3E36;
  --c-ink-soft:    #7A756B;   /* secondary text - 4.6:1 on cream */
  --c-on-dark:     #EDE8DC;
  --c-on-dark-soft:#A8A395;

  /* ---- state ---------------------------------------------- */
  --c-danger:      #A85751;
  --c-danger-tint: #FBF2F1;
  --c-warn:        #9A5A38;
  --c-ok:          #5E7F5A;
  --c-focus:       #2F6F9E;   /* deliberately outside the palette:
                                 focus must never be mistaken for brand */

  /* ---- type ----------------------------------------------- */
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale. Deliberately small - a 320px screen punishes ambition. */
  --t-xs:   0.6875rem;  /* 11px  captions, meta */
  --t-sm:   0.75rem;    /* 12px  secondary */
  --t-base: 0.875rem;   /* 14px  body, buttons */
  --t-md:   0.9375rem;  /* 15px  primary buttons */
  --t-lg:   1.5625rem;  /* 25px  screen titles (display face) */
  --t-xl:   1.625rem;   /* 26px  questions (display face) */
  --t-2xl:  3.25rem;    /* 52px  hero numerals (display face) */

  --t-label: 0.59375rem; /* 9.5px uppercase eyebrows */

  --lh-tight: 1.22;
  --lh-body:  1.6;
  --ls-label: 0.16em;

  /* ---- spacing (4px base) --------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.25rem;  --s-6: 1.5rem;
  --s-8: 2rem;     --s-10: 2.5rem;

  /* ---- shape ---------------------------------------------- */
  --r-sm: 11px;
  --r-md: 15px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- touch ----------------------------------------------
     WCAG asks 44px. Our audience is non-technical, often older,
     often one-handed. We use 56 for anything primary and never
     go below 48 for anything at all. */
  --tap-min: 48px;
  --tap:     56px;
  --tap-lg:  64px;

  /* ---- elevation ------------------------------------------ */
  --e-card:  0 1px 2px rgba(47, 62, 54, 0.04);
  --e-sheet: 0 -14px 40px rgba(47, 62, 54, 0.18);
  --e-sel:   0 0 0 3px rgba(124, 144, 112, 0.14);
  --e-sel-t: 0 0 0 3px rgba(198, 123, 92, 0.14);

  /* ---- motion --------------------------------------------- */
  --m-fast: 120ms;
  --m-base: 200ms;
  --m-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- layout --------------------------------------------- */
  --w-max:   32rem;    /* content never exceeds this, even on tablets */
  --pad-x:   1.125rem; /* 18px - the horizontal gutter, everywhere */
  --safe-b:  env(safe-area-inset-bottom, 0px);
  --safe-t:  env(safe-area-inset-top, 0px);
  --z-sheet: 40;
  --z-toast: 60;
  --z-modal: 80;
}

/* Reduced motion is honoured globally, not per-component. */
@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: 0ms; --m-base: 0ms; }
}