/* astra-child/inc/design-tokens.css
 *
 * Phase 5 gap-01 — Design tokens extracted from live www.myfertilitypod.com
 * (Astra theme palette + typography + layout). Sourced from a curl of live's
 * inline <style> on 2026-05-17.
 *
 * These `--mfp-*` variables are the single source of truth for chrome
 * (header, footer) and block templates. Critical CSS (inc/critical-css/*.css)
 * and main stylesheet rules should reference these — not hardcoded hex/px.
 *
 * Enqueued at wp_enqueue_scripts priority 1 from astra-child/functions.php so
 * the :root vars are defined BEFORE the wp_head priority-1 critical-CSS inline
 * (critical-css-loader.php) and before the deferred main stylesheet swaps in.
 *
 * Aliasing strategy: each --mfp-* references the underlying --ast-global-color-N
 * via fallback. If Astra parent's variables disappear (theme switch, future
 * Phase 8 cutover refactor), the --mfp-* fallback hex still paints correctly.
 *
 * @since Phase 5 gap-01 (2026-05-17)
 */

:root {
    /* Palette — extracted from live (Astra global colors).
     * Verified against live curl 2026-05-17. Aliased with fallback hex so
     * tokens survive an Astra-parent reshuffle. */
    /* 2026-06-02: blue retired — not part of the site palette. Rose family replaces it.
     *   primary       = #8a5651 (deep rose) — body links, focus rings, CTA bg, breadcrumbs,
     *                   footer links, hero eyebrow. Passes WCAG AA (5.7:1 on white).
     *   primary-dark  = #6e433f (deeper rose) — body link/CTA hover.
     *   accent        = #B92F6B (vivid magenta-pink) — chrome hover accent (header nav,
     *                   card title, header logo). 5.70:1 on white (passes WCAG AA normal
     *                   text). Operator-sampled from the pink-purple region of the post
     *                   featured-image graphics. Reads distinctly "pink", saturated and
     *                   energetic, ties hover state visually to the brand imagery.
     *                   Evolution: #d0a29d (2.27, washed) → #966761 (4.76, muddy) →
     *                   #380c58 (15.42, AAA but heavy aubergine) → #B92F6B (5.70, AA,
     *                   vibrant magenta — operator pick on 2026-06-02).
     * Astra global-color-N aliases removed: we don't want Astra's blue overriding our rose. */
    --mfp-color-primary:        #8a5651;
    --mfp-color-primary-dark:   #6e433f;
    --mfp-color-accent:         #B92F6B;
    /* Override Astra's customizer-generated globals so any Astra-emitted CSS
     * (.custom-logo-link, .skip-link, woocommerce, etc.) inherits our rose
     * family instead of Astra's blue. Astra writes ast-global-color-N later
     * in cascade — !important ensures our overrides win regardless of order. */
    --ast-global-color-0:       #8a5651 !important;
    --ast-global-color-1:       #6e433f !important;
    --mfp-color-text-dark:      var(--ast-global-color-2, #1e293b); /* slate dark — strong text */
    --mfp-color-text:           var(--ast-global-color-3, #334155); /* slate — body text + headings */
    --mfp-color-bg:             var(--ast-global-color-4, #ffffff); /* card / surface white */
    --mfp-color-bg-page:        #f4f2f1; /* gap-16i: warm magnolia/cream — body bg (matches live rgb(244,242,241)) */
    --mfp-color-bg-subtle:      var(--ast-global-color-5, #f0f5fa); /* light blue tint — section bands */
    --mfp-color-text-strong:    var(--ast-global-color-6, #111111); /* near-black — emphasis */
    --mfp-color-border:         var(--ast-global-color-7, #d1d5db); /* gray border */
    --mfp-color-text-darkest:   var(--ast-global-color-8, #111111); /* near-black (same as 6) */

    /* Typography — gap-08 (2026-05-18) corrected against Playwright per-element audit:
     * Live uses Raleway 300 for body/h2/nav/footer; Raleway 400 for h3/card title;
     * Raleway 500 for CTA buttons; Raleway 700 only for footer subscribe button.
     * Cormorant Garamond 300 (light) is used ONLY for H1 (gap-04 had CG 700 — wrong).
     * H2 is Raleway 300 (NOT CG — gap-04 had H2 sharing CG family — wrong).
     * Self-hosted woff2 in astra-child/fonts/ via @font-face in _shared.css. */
    --mfp-font-body:    'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mfp-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --mfp-font-heading-alt: 'Raleway', system-ui, sans-serif; /* gap-08: live h2 is Raleway 300, NOT Cormorant */

    /* Weight tokens — gap-08 expanded scale matching live's per-element usage. */
    --mfp-fw-light:     300;  /* body, h2, nav, footer body/heading, excerpt */
    --mfp-fw-body:      400;  /* default body fallback; h3/card title */
    --mfp-fw-regular:   400;
    --mfp-fw-medium:    500;  /* CTA buttons (Raleway 500) */
    --mfp-fw-semibold:  600;
    --mfp-fw-heading:   300;  /* gap-08: H1 is CG 300 (was 700); kept name for back-compat */
    --mfp-fw-bold:      700;  /* footer subscribe button (Raleway 700) */

    /* Font sizes — live's responsive scale (mobile-first, desktop overrides via @media). */
    --mfp-fs-base:      1rem;       /* 16px */
    --mfp-fs-h1:        3.375rem;   /* 54px desktop, scales down */
    --mfp-fs-h2:        2.625rem;   /* 42px desktop */
    --mfp-fs-h3:        1.75rem;    /* 28px */
    --mfp-fs-h4:        1.5rem;     /* 24px */
    --mfp-fs-h5:        1.25rem;    /* 20px */
    --mfp-fs-h6:        1.125rem;   /* 18px */
    --mfp-fs-small:     0.875rem;   /* 14px — secondary, breadcrumb */
    --mfp-fs-tiny:      0.8125rem;  /* 13px — footer copy */

    --mfp-lh-base:      1.65;       /* live --ast-body-line-height */
    --mfp-lh-heading:   1.4em;
    --mfp-lh-tight:     1.2em;

    /* Layout — live's Astra container max-width is 1200px (verified via curl). */
    --mfp-container-max:    1200px;
    --mfp-container-narrow: 921px;
    --mfp-gutter:           1rem;
    --mfp-section-y:        4rem;   /* vertical rhythm between sections */

    /* Radii + shadows — live uses subtle 4px for cards/buttons, 9999px for pills. */
    --mfp-radius:        4px;
    --mfp-radius-pill:   9999px;
    --mfp-shadow-card:   0 1px 3px rgba(0, 0, 0, 0.08);
    --mfp-shadow-hover:  0 4px 12px rgba(0, 0, 0, 0.12);

    /* Header-specific layout — gap-04 (2026-05-17) corrected to match live's 29px display.
     * Was 80px in gap-01 (assumption); Playwright measured live's logo at 29px. */
    --mfp-header-logo-max-height: 30px;
    --mfp-header-padding-y:       1rem;
    --mfp-header-border:          none;   /* live has no header border — was 1px slate in gap-01 */
}