/* ==========================================================================
   Purple Lily — Brand Tokens
   The single source of truth for colour, type, spacing and shape.
   Change a value here and it updates everywhere on the site.

   Colour rules from the brand guide (do NOT invent new colours):
   - Greens + cream carry ~8 parts in 10 of any layout.
   - Purple is a crown, not a wall (accent only: buttons, emphasis, blooms).
   - Gold is sacred and rare (scripture, fine dividers, the lily anthers only).
   - Plum replaces black for all text.
   ========================================================================== */

:root {
  /* ---- Colour palette (exact brand values) -------------------------------- */
  --sage:      #7A9E6E;  /* backgrounds, sections */
  --olive:     #3D6B4A;  /* headings on light, rules, stems */
  --forest:    #24402E;  /* dark sections, footers, depth */
  --cream:     #F5F0E8;  /* the page itself — never pure white */
  --violet:    #6B4FA0;  /* highlight ONLY: buttons, emphasis, blooms */
  --amethyst:  #A87CC0;  /* support tints */
  --gold:      #C9A84C;  /* SACRED ONLY: scripture, fine dividers, lily anthers */
  --plum:      #2C1F45;  /* all text — replaces black everywhere */

  /* ---- Semantic aliases (use these in components) ------------------------- */
  --page-bg:        var(--cream);
  --text:           var(--plum);
  --heading:        var(--olive);
  --rule:           var(--olive);
  --link:           var(--olive);
  --link-hover:     var(--violet);

  /* On the dark forest sections, text flips to cream */
  --text-on-dark:     var(--cream);
  --heading-on-dark:  var(--cream);

  /* Buttons */
  --btn-bg:          var(--violet);
  --btn-text:        var(--cream);
  --btn-bg-hover:    #58408a; /* violet, hand-darkened ~10% for hover only */

  /* A soft raised surface for cards — a touch lighter than the cream page */
  --surface:         #FBF8F2;
  --surface-border:  rgba(61, 107, 74, 0.22); /* olive @ low alpha */

  /* ---- Typography --------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Parisienne', 'Segoe Script', cursive; /* logo wordmark ONLY */

  /* Fluid type scale (min .. max, scales with viewport) */
  --step-hero:  clamp(2.6rem, 1.6rem + 4.4vw, 4.75rem); /* Fraunces Light 300 */
  --step-h1:    clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  --step-h2:    clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
  --step-h3:    clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  --step-body:  clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
  --step-small: 0.875rem;
  --step-scripture: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);

  --leading-body:    1.65;
  --leading-tight:   1.15;
  --tracking-caps:   0.14em; /* small-caps labels / eyebrows */

  /* ---- Spacing scale ------------------------------------------------------ */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Vertical rhythm for full-width sections (mobile-first, grows on desktop) */
  --section-y: clamp(3rem, 2rem + 6vw, 6rem);

  /* ---- Shape & line ------------------------------------------------------- */
  --radius:      8px;   /* images and cards — ~8pt rounded corners */
  --radius-lg:   14px;
  --radius-pill: 999px;
  --rule-width:  1px;   /* fine 0.75pt olive rules as dividers */
  --hairline:    1px;

  /* ---- Layout ------------------------------------------------------------- */
  --measure:      65ch;    /* comfortable reading width for body copy */
  --container:    1120px;  /* max content width */
  --container-narrow: 780px;

  /* ---- Depth (kept very subtle — quiet over loud) ------------------------- */
  --shadow-soft: 0 1px 2px rgba(44, 31, 69, 0.05),
                 0 8px 24px rgba(44, 31, 69, 0.06);

  /* ---- Motion ------------------------------------------------------------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:        220ms;
}