/* ============================================================
   Foxglove Books — Brand tokens
   ------------------------------------------------------------
   This is the customization layer. Rebrand the template by
   editing the values below; index.html reads all of them.
   Loaded BEFORE the inline <style> in index.html.
   ============================================================ */

:root{
  /* ---- Core palette ---------------------------------------
     ink / ink-soft / ink-mute = primary, secondary, tertiary text
     paper      = page background
     paper-2    = recessed band (alternating section)
     card       = raised card surface
     marigold   = PRIMARY ACCENT — large fills, rules, badges
     marigold-ink = AA-safe accent for SMALL text on paper
     plum       = secondary accent (the "foxglove") + focus ring
     sage       = tertiary accent
     rule / rule-soft = 1px borders and hairlines
  --------------------------------------------------------- */
  --ink:#1B1A17;
  --ink-soft:#4A463F;
  --ink-mute:#6E685D;
  --paper:#F7F3EA;
  --paper-2:#EFE8DA;
  --card:#FFFDF8;
  --marigold:#E0891C;
  --marigold-ink:#9A5A05;
  --plum:#5A2E52;
  --sage:#63705A;
  --rule:#DCD3C1;
  --rule-soft:#E7DFD0;

  /* ---- Typefaces ------------------------------------------
     Change these AND the Google Fonts <link> in index.html.
  --------------------------------------------------------- */
  --serif:'Fraunces',Georgia,serif;                                  /* headings */
  --sans:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;      /* body / UI */
  --script:'Caveat',cursive;                                         /* handwritten notes */

  /* ---- Shape + depth --------------------------------------- */
  --r:4px;
  --r-lg:10px;
  --shadow-card:0 1px 2px rgba(27,26,23,.05), 0 10px 26px -14px rgba(27,26,23,.22);
  --shadow-lift:0 2px 4px rgba(27,26,23,.06), 0 20px 40px -18px rgba(27,26,23,.30);

  /* ---- Layout ---------------------------------------------
     --gutter is overridden at 1024 / 600 / 360 in index.html.
  --------------------------------------------------------- */
  --gutter:60px;
  --maxw:1200px;
}