/* =============================================================
   AskSara.care — Design Tokens (single source of truth)
   -------------------------------------------------------------
   The current LIVE palette, ported from the WordPress header.php.
   This is not a new brand. Every page inherits from these tokens.
   Generator-agnostic: drop straight into Astro/Hugo as a global
   stylesheet, no framework dependencies.
   ============================================================= */

:root {

  /* ---- Brand palette (values confirmed from header.php) ---- */
  --deep-teal:    #0F4C5C;   /* primary brand, headings, dark surfaces */
  --soft-cyan:    #379683;   /* accent, buttons, links, rules          */
  --cyan-dark:    #2d7d6b;   /* button hover / pressed                 */
  --neutral-slate:#708090;   /* muted body / secondary text            */
  --light-fog:    #F1F7F8;   /* tinted section backgrounds, cards      */

  /* ---- Surfaces & text ----
     Reconciled 2026-06 against the live header.php token set. The body text
     color is now the real value; --text-dark is the real primary/dark text.
     Headings still resolve to --deep-teal by the existing design and were not
     repointed (changing them would be a design change, not a reconciliation).
     NOTE: the supplied live set did not include a page-background
     ("off-white") value, so --off-white keeps its prior working value pending
     confirmation against header.php. --text-muted likewise keeps its working
     value; the live secondary token is --neutral-slate (#708090). */
  --off-white:    #FCFCFB;   /* page background (value not in supplied live set; confirm) */
  --text:         #3d4f55;   /* body text — reconciled to the live --text-body value */
  --text-dark:    #1a2e35;   /* primary / dark text — live --text-dark               */
  --text-muted:   #5A6B72;   /* secondary text (live equivalent: --neutral-slate #708090) */
  --border:       #dde3e5;   /* form / divider borders (from home CSS) */

  /* ---- Sara (lavender is RESERVED for Sara only) ---- */
  --sara-lavender:      #9682C8;
  --sara-lavender-soft: #C9BEE8;
  --sara-glow:          rgba(150, 130, 200, 0.30);

  /* ---- Typography ---- */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Atkinson Hyperlegible', system-ui, -apple-system,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Type scale */
  --fs-h1: 46px;
  --fs-h2: 34px;
  --fs-h3: 20px;
  --fs-body: 17px;
  --lh-body: 1.7;

  /* ---- Radii ---- */
  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 20px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 8px 24px rgba(15, 76, 92, 0.10);
  --shadow-md: 0 12px 32px rgba(15, 76, 92, 0.10);
  --shadow-lg: 0 25px 50px rgba(0, 0, 0, .08), 0 10px 20px rgba(0, 0, 0, .05);

  /* ---- Layout ---- */
  --maxw:       1100px;
  --maxw-prose: 840px;   /* readable measure for centered article column */
  --maxw-hero:  900px;

  /* ---- Motion ---- */
  --ease: 0.3s ease;
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 28px;
  }
}