/* ==========================================================================
   HM changes: hm-default.css — Store / Addon landing page styles
   All store-specific addon pages load this file. Use --hm-sp-* variables
   so switching themes only requires overriding these variables.
   ========================================================================== */

/* ── Variables ─────────────────────────────────────────────────────────── */
/*
 * These variables reference the main template's CSS custom properties
 * (defined in custom.css) so store pages automatically adopt the active theme.
 * Fallback values match the default dark/teal theme.
 */
:root {
    /* ── Page accent — override per-page via .landing-page.{page} ── */
    --hm-sp-accent:           var(--teal-400, #00d5be);
    --hm-sp-accent-pale:      rgba(0, 213, 190, 0.13);
    --hm-sp-accent-lifted:    #00b3a4;   /* deeper tint; override with page accent */

    /* Hero palette */
    --hm-sp-hero-bg:          var(--bg-inverted, #111827);
    --hm-sp-hero-text:        var(--text-inverted, #ffffff);
    --hm-sp-hero-sub:         rgba(255,255,255,0.72);
    --hm-sp-hero-accent:      var(--hm-sp-accent);

    /* Sticky nav */
    --hm-sp-nav-bg:           var(--bg, #ffffff);
    --hm-sp-nav-border:       var(--border-muted, #e4e4e7);
    --hm-sp-nav-text:         var(--text-accented, #374151);
    --hm-sp-nav-hover:        var(--text, #111827);
    --hm-sp-nav-active-color: var(--text, #111827);
    --hm-sp-nav-active-line:  var(--hm-sp-accent);

    /* Section backgrounds */
    --hm-sp-section-alt:      var(--bg-lifted, #f4f5f7);
    --hm-sp-section-white:    var(--bg, #ffffff);
    --hm-sp-section-dark:     var(--bg-inverted, #111827);

    /* Feature cards */
    --hm-sp-card-bg:          var(--bg, #ffffff);
    --hm-sp-card-border:      var(--border-muted, #e4e4e7);
    --hm-sp-card-shadow:      0 1px 4px rgba(0,0,0,0.07), 0 4px 18px rgba(0,0,0,0.05);
    --hm-sp-card-shadow-hover:0 4px 14px rgba(0,0,0,0.1), 0 12px 36px rgba(0,0,0,0.09);
    --hm-sp-card-icon-bg:     var(--bg-lifted, #f4f5f7);
    --hm-sp-card-icon-color:  var(--text, #111827);

    /* Pricing */
    --hm-sp-pricing-header:      var(--text, #111827);
    --hm-sp-pricing-featured-bg: var(--bg-inverted, #111827);
    --hm-sp-pricing-featured-text:var(--text-inverted, #ffffff);
    --hm-sp-pricing-card-bg:     var(--primary-lifted, #1f2937);
    --hm-sp-pricing-card-border: var(--primary-accented, #374151);
    --hm-sp-price-color:         var(--text, #111827);
    --hm-sp-price-cycle:         var(--text-lifted, #6b7280);
    --hm-sp-tick-color:          var(--hm-sp-accent);
    --hm-sp-lite-bg:             var(--bg-lifted, #f4f5f7);
    --hm-sp-lite-border:         var(--border-muted, #e4e4e7);

    /* FAQ */
    --hm-sp-faq-border:       var(--border-muted, #e4e4e7);
    --hm-sp-faq-q:            var(--text, #111827);
    --hm-sp-faq-a:            var(--text-lifted, #6b7280);

    /* Typography */
    --hm-sp-heading-font:     inherit;
    --hm-sp-body-font:        inherit;

    /* Buttons */
    --hm-sp-btn-primary-bg:   var(--primary, #111827);
    --hm-sp-btn-primary-text: var(--text-inverted, #ffffff);
    --hm-sp-btn-primary-hover:var(--primary-lifted, #1f2937);
    --hm-sp-btn-outline-color:var(--text, #111827);
    --hm-sp-btn-radius:       8px;
}


/* HM changes end */