/**
 * WCPC Sermon Manager — Design Tokens
 *
 * Surfaces the wcpc.church design system as CSS custom properties scoped
 * under `.wcpc-sermons`. Values reference the live Elementor Kit variables
 * (`var(--e-global-color-*)`) with hex fallbacks so output still renders
 * correctly when the Kit isn't in scope (e.g., RSS preview, block editor).
 *
 * Spec: DESIGN-SYSTEM.md §10 ("Token Starter File") plus WCPC-specific
 * locals for the transcript scripture palette.
 *
 * Load order: this file is enqueued BEFORE components.css and frontend.css.
 *
 * @package WCPC_Sermons
 * @since   1.38.0
 */

.wcpc-sermons {
    /* ============================================================
       Color — reference Kit variables with hex fallbacks
       ============================================================ */
    --pl-color-primary:      var(--e-global-color-primary,    #34657F);
    --pl-color-primary-dark: #28506A;                                      /* primary darkened ~10% for hover */
    --pl-color-secondary:    var(--e-global-color-secondary,  #54595F);
    --pl-color-text:         var(--e-global-color-text,       #7A7A7A);
    --pl-color-accent:       var(--e-global-color-accent,     #61CE70);
    --pl-color-white:        #FFFFFF;

    /* Semantic colors (Kit values + contrast-safe text variants) */
    --pl-color-success:      #4B9560;     /* background use */
    --pl-color-success-text: #347048;     /* small-text success (AAA-tight on white) */
    --pl-color-warn:         #FFB549;     /* background use only */
    --pl-color-warn-text:    #8A5A00;     /* small-text warn (AA on white) */
    --pl-color-error:        #EF6079;     /* large text / UI only */
    --pl-color-error-text:   #C53654;     /* small-text error */
    --pl-color-accent-deep:  #4B9560;     /* deeper green variant */
    --pl-color-plum:         #66435A;     /* seasonal / liturgical */

    /* ============================================================
       Surfaces
       ============================================================ */
    --pl-surface-card:       #FFFFFF;
    --pl-surface-section:    #E5E9F3;
    --pl-surface-overlay:    rgba(0, 0, 0, 0.65);
    --pl-border-hairline:    rgba(52, 101, 127, 0.12);   /* primary @ 12% */
    --pl-border-section:     #E5E9F3;

    /* ============================================================
       Text variants
       ============================================================ */
    --pl-text-on-primary:    #FFFFFF;
    --pl-text-strong:        #54595F;    /* default body text for plugin output (AAA on white) */
    --pl-text-muted:         #7A7A7A;    /* use sparingly — fails AA below 18px */
    --pl-text-link:          var(--pl-color-primary);

    /* ============================================================
       State
       ============================================================ */
    --pl-focus-ring:         0 0 0 3px rgba(52, 101, 127, 0.35);
    --pl-hover-overlay:      rgba(0, 0, 0, 0.04);

    /* ============================================================
       Typography — Kit variables with fallback stacks
       ============================================================ */
    --pl-font-display:  var(--e-global-typography-primary-font-family,   "Open Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pl-font-eyebrow:  var(--e-global-typography-secondary-font-family, "Open Sans Condensed"), "Open Sans", sans-serif;
    --pl-font-body:     var(--e-global-typography-text-font-family,      "Open Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pl-font-accent:   var(--e-global-typography-accent-font-family,    "Roboto"), -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --pl-font-size-h1:     2.5rem;       /* 40px */
    --pl-font-size-h2:     2rem;         /* 32px */
    --pl-font-size-h3:     1.75rem;      /* 28px */
    --pl-font-size-h4:     1.5rem;       /* 24px */
    --pl-font-size-h5:     1.25rem;      /* 20px */
    --pl-font-size-h6:     1rem;         /* 16px */
    --pl-font-size-body:   1rem;         /* 16px */
    --pl-font-size-small:  0.875rem;     /* 14px */
    --pl-font-size-micro:  0.75rem;      /* 12px — must pair with strong text color */

    --pl-letter-spacing-accent: 0.04em;

    /* ============================================================
       Spacing — 4px rhythm, aligned to Elementor's 20px widget gap
       ============================================================ */
    --pl-space-0: 0;
    --pl-space-1: 4px;
    --pl-space-2: 8px;
    --pl-space-3: 12px;
    --pl-space-4: 16px;
    --pl-space-5: 20px;    /* = Elementor --widgets-spacing */
    --pl-space-6: 24px;
    --pl-space-7: 32px;
    --pl-space-8: 48px;
    --pl-space-9: 64px;

    /* ============================================================
       Radii
       ============================================================ */
    --pl-radius-sm:   3px;
    --pl-radius-md:   5px;      /* = Kit button radius */
    --pl-radius-lg:   8px;
    --pl-radius-pill: 999px;

    /* ============================================================
       Shadows — base color #0F222E is ~primary darkened; warmer than black on teal
       ============================================================ */
    --pl-shadow-none: none;
    --pl-shadow-sm:   0 1px 2px  rgba(15, 34, 46, 0.06);
    --pl-shadow-md:   0 4px 12px rgba(15, 34, 46, 0.10);
    --pl-shadow-lg:   0 10px 30px rgba(15, 34, 46, 0.15);

    /* ============================================================
       Motion
       ============================================================ */
    --pl-transition-fast: 120ms ease-out;
    --pl-transition-base: 200ms ease-out;
    --pl-transition-slow: 300ms ease-in-out;

    /* ============================================================
       Z-index — stay below 10000 (Elementor nav/popup territory)
       ============================================================ */
    --pl-z-base:     1;
    --pl-z-sticky:   100;
    --pl-z-dropdown: 1000;
    --pl-z-overlay:  9000;
    --pl-z-modal:    9100;
    --pl-z-toast:    9500;

    /* ============================================================
       WCPC-specific locals — transcript scripture palette (liturgical,
       deliberately outside the Kit)
       ============================================================ */
    --pl-scripture-rule: #C0A26E;       /* muted gold rule/border */
    --pl-scripture-bg:   #FAF8F4;       /* parchment tint */
    --pl-scripture-sup:  #8B7355;       /* verse-number accent */
    --pl-scripture-cite: #6B5B3E;       /* citation color */

    /* Literary (non-scripture) quote */
    --pl-literary-rule:  #A0A0A0;
    --pl-literary-bg:    #F7F7F7;
}

/* ============================================================
   Reduced motion — collapse transitions inside .wcpc-sermons
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .wcpc-sermons {
        --pl-transition-fast: 0ms;
        --pl-transition-base: 0ms;
        --pl-transition-slow: 0ms;
    }
}