/* ==========================================================================
   Shepherd's Table — Design Tokens
   Source of truth for the whole site (front-end, Elementor widgets, admin).
   Palette sampled directly from the brand assets:
     - Apostolate presentation .......... #B43D1B (terracotta)
     - "4 Ways to Serve" flyer .......... #05224C navy, #FDFAF5 cream,
                                          #37394C / #A64058 / #153C63 / #7D7569
   ========================================================================== */

:root {
  /* ---- Brand core -------------------------------------------------- */
  --st-terracotta:        #B43D1B;   /* primary action  — 5.6:1 on cream  */
  --st-terracotta-600:    #9B3416;
  --st-terracotta-700:    #7F2A11;
  --st-terracotta-100:    #F7E3DB;
  --st-terracotta-050:    #FDF1EB;

  --st-navy:              #05224C;   /* structure / ink — 15.7:1 on cream */
  --st-navy-800:          #0B2E5E;
  --st-navy-600:          #153C63;
  --st-navy-100:          #C0D6E3;
  --st-navy-050:          #EAF1F6;

  --st-footer:            #37394C;   /* site footer ground — client-specified */

  --st-cream:             #FDFAF5;   /* page background                    */
  --st-cream-200:         #F5EFE5;
  --st-parchment:         #EFE7D9;
  --st-gold:              #C08A2E;   /* hairline detail from the logo      */

  /* ---- Service colours (one per "way to serve") -------------------- */
  --st-meal:              #37394C;   /* 1. Provide a Meal   — 11.3:1 white */
  --st-meal-tint:         #C9CBD6;
  --st-meal-wash:         #EEEFF3;

  --st-sponsor:           #A64058;   /* 2. Sponsor a Meal   — 6.0:1 white  */
  --st-sponsor-tint:      #F0C9CD;
  --st-sponsor-wash:      #FBEDEE;

  --st-deliver:           #153C63;   /* 3. Deliver a Meal   — 11.3:1 white */
  --st-deliver-tint:      #C0D6E3;
  --st-deliver-wash:      #EDF3F8;

  --st-groceries:         #7D7569;   /* 3. Provide Groceries — 4.5:1 white  */
  --st-groceries-tint:    #E5E1D9;
  --st-groceries-wash:    #F4F1EB;

  /* ---- Semantic ---------------------------------------------------- */
  --st-bg:                var(--st-cream);
  --st-bg-alt:            #FFFFFF;
  --st-bg-sunken:         var(--st-cream-200);
  --st-fg:                var(--st-navy);
  --st-fg-muted:          #55637A;      /* 5.1:1 on cream                  */
  --st-fg-subtle:         #6E7B90;      /* 4.5:1 on cream — never < 14px   */
  --st-border:            #E2D9CB;
  --st-border-strong:     #C9BCA8;
  --st-ring:              var(--st-terracotta);

  --st-success:           #1E5E43;
  --st-success-tint:      #BDDEC1;
  --st-warning:           #A8690F;
  --st-danger:            #A32718;
  --st-on-dark:           #FDFAF5;

  /* ---- Typography -------------------------------------------------- */
  --st-font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --st-font-wordmark: "Cinzel", "Playfair Display", Georgia, serif;
  --st-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --st-text-xs:   0.8125rem;  /* 13px — labels only, never body copy      */
  --st-text-sm:   0.9375rem;  /* 15px                                     */
  --st-text-base: 1rem;       /* 16px                                     */
  --st-text-lg:   1.125rem;
  --st-text-xl:   1.375rem;
  --st-text-2xl:  clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --st-text-3xl:  clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
  --st-text-4xl:  clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --st-text-hero: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);

  --st-leading-tight: 1.12;
  --st-leading-snug:  1.3;
  --st-leading-body:  1.65;   /* >= 1.5 per WCAG 1.4.12                   */

  --st-tracking-wordmark: 0.14em;
  --st-tracking-eyebrow:  0.22em;

  /* ---- Spacing (marketing scale: airy) ----------------------------- */
  --st-space-1:  4px;
  --st-space-2:  8px;
  --st-space-3:  12px;
  --st-space-4:  16px;
  --st-space-5:  24px;
  --st-space-6:  32px;
  --st-space-7:  48px;
  --st-space-8:  64px;
  --st-space-9:  96px;
  --st-space-10: 128px;

  --st-container: 1200px;
  --st-container-narrow: 760px;
  --st-gutter: clamp(20px, 5vw, 48px);

  /* ---- Radii, borders, elevation ----------------------------------- */
  --st-radius-sm: 6px;
  --st-radius:    12px;
  --st-radius-lg: 20px;
  --st-radius-pill: 999px;
  --st-radius-btn:  8px;    /* buttons and segmented controls — squared, not pills */

  --st-shadow-sm: 0 1px 2px rgba(5, 34, 76, .06), 0 2px 6px rgba(5, 34, 76, .05);
  --st-shadow:    0 4px 10px rgba(5, 34, 76, .07), 0 12px 28px rgba(5, 34, 76, .07);
  --st-shadow-lg: 0 10px 24px rgba(5, 34, 76, .10), 0 28px 60px rgba(5, 34, 76, .12);

  /* ---- Motion ------------------------------------------------------ */
  --st-dur-fast:  140ms;   /* hover / press feedback                     */
  --st-dur:       240ms;   /* state change, disclosure                   */
  --st-dur-slow:  480ms;   /* section reveal                             */
  --st-ease:      cubic-bezier(.22, .61, .36, 1);     /* power2.out-ish  */
  --st-ease-out:  cubic-bezier(.16, 1, .3, 1);        /* expo.out-ish    */

  /* ---- Layout helpers ---------------------------------------------- */
  --st-header-h: 86px;
  scroll-padding-top: calc(var(--st-header-h) + 16px); /* focus not obscured */
}

@media (max-width: 782px) {
  :root { --st-header-h: 72px; }
}

/* Reduced motion: durations collapse, transitions still fire so state is
   never lost — animations simply land on their final frame. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --st-dur-fast: 1ms;
    --st-dur: 1ms;
    --st-dur-slow: 1ms;
  }
}

/* --------------------------------------------------------------------------
   Elementor Site Settings drive the palette

   When the site runs on Elementor, its kit publishes the global colours and
   fonts as custom properties on <body> (--e-global-color-accent and so on).
   Re-pointing the tokens there means a colour or font changed in Site Settings
   reaches the plugin's own blocks — hero, cards, calendar, forms — as well as
   the pages. Without Elementor every fallback below is the value above, so
   nothing changes.

   This has to sit on body, not :root: the kit declares its variables on body,
   and a custom property resolves where it is declared. For the same reason the
   derived tokens (--st-bg, --st-fg, --st-ring) are restated here — declared on
   :root they would keep the :root value no matter what the kit says.
   -------------------------------------------------------------------------- */

body {
  --st-terracotta:     var(--e-global-color-accent, #B43D1B);
  --st-terracotta-600: var(--e-global-color-stterra600, #9B3416);
  --st-terracotta-050: var(--e-global-color-stterra050, #FDF1EB);
  --st-navy:           var(--e-global-color-primary, #05224C);
  --st-footer:         var(--e-global-color-secondary, #37394C);
  --st-cream:          var(--e-global-color-stcream, #FDFAF5);
  --st-fg-muted:       var(--e-global-color-text, #55637A);
  --st-border:         var(--e-global-color-strule, #E2D9CB);

  --st-meal:           var(--e-global-color-stmeal, #37394C);
  --st-groceries:      var(--e-global-color-stgroceries, #7D7569);
  --st-sponsor:        var(--e-global-color-stdonate, #A64058);

  /* Tints are mixed from the service colour rather than fixed, so a colour
     changed in Site Settings brings its own badge and wash with it. */
  --st-meal-tint:      color-mix(in srgb, var(--st-meal) 26%, #FFF);
  --st-meal-wash:      color-mix(in srgb, var(--st-meal) 8%, #FFF);
  --st-groceries-tint: color-mix(in srgb, var(--st-groceries) 26%, #FFF);
  --st-groceries-wash: color-mix(in srgb, var(--st-groceries) 8%, #FFF);
  --st-sponsor-tint:   color-mix(in srgb, var(--st-sponsor) 26%, #FFF);
  --st-sponsor-wash:   color-mix(in srgb, var(--st-sponsor) 8%, #FFF);

  --st-bg:             var(--st-cream);
  --st-bg-sunken:      var(--e-global-color-stparchment, #EFE7D9);
  --st-fg:             var(--st-navy);
  --st-ring:           var(--st-terracotta);

  --st-font-display:   var(--e-global-typography-primary-font-family, "Playfair Display"), Georgia, "Times New Roman", serif;
  --st-font-wordmark:  var(--e-global-typography-secondary-font-family, "Cinzel"), "Playfair Display", Georgia, serif;
  --st-font-body:      var(--e-global-typography-text-font-family, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}