/* ==========================================================================
   Clean Monday Press — design tokens (v1, 4 Nov 2026)
   Drop into Astro as src/styles/tokens.css and import once in BaseLayout.
   Mobile-first: base values are for < 48rem; the media query raises them.
   Colour pairs and contrast ratios are listed in style-guide.md §1.
   ========================================================================== */

:root {
  /* ---------- Colour: raw palette (from the book cover + interior) ---------- */
  --c-paper:        #FAF6EE;  /* page background: warm uncoated stock        */
  --c-vellum:       #F3EAD3;  /* = cover cream; alternate section bands       */
  --c-ink:          #1F1A1E;  /* body text; warm near-black                   */
  --c-ink-muted:    #5C5359;  /* meta, captions, helper text                  */
  --c-purple:       #4A2052;  /* = cover purple; Lenten violet; primary       */
  --c-purple-deep:  #361539;  /* hover/pressed purple; footer                 */
  --c-gold:         #C9A45C;  /* = cover gold; DECORATIVE + text on purple only */
  --c-gold-ink:     #7A5B1E;  /* gold that passes AA as text on paper/vellum  */
  --c-rule:         #D8CCB6;  /* hairlines, card borders (decorative)         */
  --c-rule-strong:  #8C8079;  /* form field borders (3.56:1, non-text AA)     */
  --c-error:        #8E2A2A;
  --c-success:      #2F5B3A;
  --c-white:        #FFFFFF;

  /* ---------- Colour: roles (use these in components) ---------- */
  --color-bg:              var(--c-paper);
  --color-bg-alt:          var(--c-vellum);
  --color-bg-inverse:      var(--c-purple);
  --color-bg-footer:       var(--c-purple-deep);
  --color-text:            var(--c-ink);
  --color-text-muted:      var(--c-ink-muted);
  --color-text-inverse:    var(--c-vellum);
  --color-accent:          var(--c-purple);       /* links, headings accents */
  --color-accent-hover:    var(--c-purple-deep);
  --color-accent-inverse:  var(--c-gold);         /* links/labels on purple   */
  --color-label:           var(--c-gold-ink);     /* small-caps kickers on paper */
  --color-ornament:        var(--c-purple);       /* ornament fill on paper   */
  --color-ornament-inverse:var(--c-gold);
  --color-border:          var(--c-rule);
  --color-border-strong:   var(--c-rule-strong);
  --color-focus:           var(--c-purple);
  --color-focus-inverse:   var(--c-gold);
  --color-error:           var(--c-error);
  --color-success:         var(--c-success);
  --color-selection:       #E6D7EA;               /* ink on this = 12.47:1 */

  /* ---------- Type ---------- */
  --font-serif: "EB Garamond", "Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-features-body: "kern", "liga", "onum", "pnum";   /* old-style figures in prose */
  --font-features-ui:   "kern", "liga", "lnum", "tnum";   /* lining figures in prices/dates/forms */

  --fw-regular: 400;
  --fw-medium:  500;   /* headings: the book sets all titles at 500 */
  --fw-semibold:600;   /* buttons only */

  /* Type scale — MOBILE (rem, 1rem = 16px) */
  --fs-caption: 0.875rem;   /* 14px  credits, fine print (italic or regular)  */
  --fs-label:   0.9375rem;  /* 15px  small-caps kickers, meta, nav            */
  --fs-small:   1rem;       /* 16px  form help, footer                        */
  --fs-body:    1.125rem;   /* 18px  body                                      */
  --fs-lead:    1.25rem;    /* 20px  deks, intro paragraphs (italic)          */
  --fs-h4:      1.25rem;    /* 20px                                            */
  --fs-h3:      1.5rem;     /* 24px                                            */
  --fs-h2:      1.875rem;   /* 30px                                            */
  --fs-h1:      2.375rem;   /* 38px                                            */
  --fs-display: 2.75rem;    /* 44px  home hero title only                     */
  --fs-dropcap: 3.6em;      /* relative to body                               */

  --lh-tight: 1.1;   /* display, h1 */
  --lh-snug:  1.2;   /* h2–h4 */
  --lh-ui:    1.35;  /* labels, buttons, nav */
  --lh-body:  1.55;  /* prose */
  --lh-verse: 1.5;   /* scripture / prayer blocks */

  --ls-smallcaps: 0.08em;   /* small caps (font-variant-caps: all-small-caps for ALL CAPS text) */
  --ls-kicker:    0.14em;   /* spaced kickers, like the cover's "THE" */
  --ls-wordmark:  0.10em;

  --measure:        34em;   /* ≈ 66 characters at body size */
  --measure-narrow: 26em;   /* scripture, prayers, centred blocks */

  /* ---------- Space (rem) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;
  --section-y: var(--sp-8);          /* vertical padding of a page section */
  --flow: 1em;                        /* paragraph spacing inside prose    */

  /* ---------- Layout ---------- */
  --container:      72rem;   /* 1152px max content width */
  --container-text: 42rem;   /* article column incl. padding */
  --gutter:         1.25rem; /* side padding; grows at md/lg */
  --grid-gap:       1.5rem;
  --header-h:       4rem;

  /* Breakpoints (for reference; CSS custom props can't be used in @media):
     --bp-sm: 30rem (480px)  --bp-md: 48rem (768px)
     --bp-lg: 64rem (1024px) --bp-xl: 80rem (1280px) */

  /* ---------- Lines, radii, shadows, motion ---------- */
  --hairline: 1px;
  --rule-w:   1px;
  --rule-double: 3px double var(--color-border);  /* header/footer double rule */
  --radius-0: 0;          /* default: square, like a printed page */
  --radius-1: 2px;        /* buttons, inputs (barely softened)    */
  --shadow-book: 0 1px 2px rgba(31,26,30,.18), 0 12px 28px -8px rgba(31,26,30,.35), 0 28px 60px -20px rgba(54,21,57,.35);
  --shadow-card: 0 1px 0 rgba(31,26,30,.04);
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 3px;
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur-1: 120ms;
  --dur-2: 220ms;

  /* ---------- Component tokens ---------- */
  --btn-h: 3rem;                 /* ≥ 44px touch target */
  --btn-px: 1.5rem;
  --btn-fs: 1.0625rem;
  --input-h: 3rem;
  --card-pad: 1.5rem;
  --logo-h: 2.75rem;             /* header logo B horizontal lockup height (mobile, 44px → 12px cap height) */
  --logo-h-footer: 4.5rem;       /* footer logo B stacked lockup height (72px) */
  --cover-w-hero: 16rem;         /* book cover width in hero (mobile) */
}

@media (min-width: 48rem) {
  :root {
    /* Type scale — DESKTOP */
    --fs-caption: 0.9375rem;  /* 15px */
    --fs-label:   1rem;       /* 16px */
    --fs-small:   1.0625rem;  /* 17px */
    --fs-body:    1.25rem;    /* 20px */
    --fs-lead:    1.4375rem;  /* 23px */
    --fs-h4:      1.4375rem;  /* 23px */
    --fs-h3:      1.875rem;   /* 30px */
    --fs-h2:      2.5rem;     /* 40px */
    --fs-h1:      3.25rem;    /* 52px */
    --fs-display: 4.25rem;    /* 68px */
    --lh-body:    1.6;

    --gutter:    2rem;
    --grid-gap:  2rem;
    --section-y: var(--sp-9);
    --header-h:  5.5rem;
    --logo-h:    3.75rem;   /* 60px → ~16px cap height */
    --cover-w-hero: 22rem;
  }
}
@media (min-width: 64rem) {
  :root { --gutter: 3rem; --grid-gap: 2.5rem; --cover-w-hero: 25rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; }
}