/**
 * HiGuppy Design Tokens
 *
 * CSS custom properties defining the visual design system for higuppy.com.
 * These tokens ensure consistency across all pages for colors, typography,
 * spacing, and touch targets.
 *
 * @package HiGuppy
 * @since 1.0.0
 */

:root {
    /* Canonical Batch 0 palette from the master prompt. */
    --higuppy-primary: #14234a;
    --higuppy-secondary: #2f57d5;
    --higuppy-accent: #ff7a4f;
    --higuppy-accent-orange: #ff7a4f;
    --higuppy-neutral-100: #eaf8ff;
    --higuppy-neutral-900: #14234a;

    /* Canonical typography contract — one family and one semantic scale. */
    --hg-font-family: "Baloo 2", sans-serif;
    --hg-font-size-body: 16px;
    --hg-font-size-lead: clamp(18px, 1.2vw, 20px);
    --hg-font-size-h1: clamp(36px, 5vw, 68px);
    --hg-font-size-h2: 25px;
    --hg-font-size-h3: 20px;
    --hg-font-size-h4: 20px;
    --hg-font-size-h5: 18px;
    --hg-font-size-h6: 16px;
    --hg-font-size-display: clamp(44px, 6vw, 84px);
    --hg-font-weight-body: 400;
    --hg-font-weight-label: 600;
    --hg-font-weight-ui: 700;
    --hg-font-weight-h1: 800;
    --hg-font-weight-h2: 800;
    --hg-font-weight-h3: 700;
    --hg-font-weight-heading: 700;
    --hg-font-weight-display: 800;
    --hg-line-height-body: 1.65;
    --hg-line-height-heading: 1.16;
    --hg-line-height-tight: 1.2;
    --higuppy-font-primary: var(--hg-font-family);
    --higuppy-font-heading: var(--hg-font-family);
    --higuppy-font-mono: var(--hg-font-family);

    /* Spacing unit */
    --higuppy-space: 8px;

    /* Touch targets */
    --higuppy-touch-min: 44px;

    /* Shared natural storefront primitives consumed by every route owner. */
    --hg-shared-canvas: #fffdf8;
    --hg-shared-water: #eaf6f2;
    --hg-shared-sand: #f7f1e6;
    --hg-shared-body: "Baloo 2", sans-serif;
    --hg-shared-heading: "Baloo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hg-shared-coral: #b7472c;
    --hg-shared-touch-target: 44px;
    --hg-shared-header-max-width: var(--hg-layout-max);
    --hg-shared-header-gutter: 16px;
    --hg-shared-header-gutter-mobile: 12px;

    /* Shared sizing: outer layout, readable prose and interface are distinct roles. */
    --hg-layout-max: 1280px;
    --hg-layout-gutter: 24px;
    --hg-layout-width: min(var(--hg-layout-max), calc(100% - var(--hg-layout-gutter) - var(--hg-layout-gutter)));
    --hg-layout-inset: max(var(--hg-layout-gutter), calc((100% - var(--hg-layout-max)) / 2));
    --hg-prose-max: 860px;
    --hg-layout-gap: 40px;
    --hg-type-body: 16px;
    --hg-type-ui: 15px;
    --hg-type-caption: 13px;
    --hg-type-reading: 18px;
    --hg-type-section: clamp(26px, 2.3vw, 32px);
    --hg-type-subheading: 22px;
    --hg-control-font: 14px;
    --hg-control-height: 44px;
    --hg-control-radius: 10px;
    --hg-brand-size: 29px;
    --hg-brand-mark: 42px;
    --hg-brand-gap: 7px;

    /* Canonical hg-* aliases shared by the shell, WooCommerce, and pages. */
    --hg-navy: #14234a;
    --hg-navy-2: #14234a;
    --hg-blue: #2f57d5;
    --hg-aqua: #73ddea;
    --hg-aqua-soft: #eaf8ff;
    --hg-cream: #fff4df;
    --hg-yellow: #f6c95d;
    --hg-orange: #ff7a4f;
    --hg-orange-hover: #d9534f;
    --hg-white: #ffffff;
    --hg-surface: #eaf8ff;
    --hg-text: #18264d;
    --hg-muted: #6e778d;
    --hg-border: #dde6f1;
    --hg-color-navy: var(--hg-navy);
    --hg-color-blue: var(--hg-blue);
    --hg-color-aqua: var(--hg-aqua);
    --hg-color-coral: var(--higuppy-accent);
    --hg-color-orange: var(--hg-orange);
    --hg-color-surface: var(--hg-surface);
    --hg-color-muted: var(--hg-muted);
    --hg-color-line: var(--hg-border);
    --higuppy-canonical-navy: #14234a;
    --higuppy-canonical-blue: #2f57d5;
    --higuppy-canonical-aqua: #73ddea;
    --higuppy-canonical-coral: #ff7a4f;
    --higuppy-canonical-soft: #eaf8ff;
    --higuppy-canonical-muted: #6e778d;
    --higuppy-canonical-line: #dde6f1;
    --hg-font-body: var(--hg-font-family);
    --hg-font-heading: var(--hg-font-family);
    --hg-container: var(--hg-layout-max);
    --hg-content: 760px;
    --hg-radius-sm: 12px;
    --hg-radius-md: 18px;
    --hg-radius-lg: 28px;
    --hg-shadow-sm: 0 8px 24px rgba(20, 35, 74, 0.08);
    --hg-shadow-md: 0 18px 44px rgba(20, 35, 74, 0.14);
    --hg-space-1: 0.5rem;
    --hg-space-2: 1rem;
    --hg-space-3: 1.5rem;
    --hg-space-4: 2rem;
    --hg-space-5: 3rem;
    --hg-space-6: 4.5rem;
}

@media (max-width: 1100px) { :root { --hg-brand-size:24px; --hg-brand-mark:30px; } }
@media (max-width: 1024px) { :root { --hg-layout-gutter:20px; --hg-layout-gap:28px; } }
@media (max-width: 600px) { :root { --hg-layout-gutter:16px; --hg-type-reading:17px; --hg-type-subheading:20px; } }
@media (max-width: 389px) { :root { --hg-brand-size:22px; --hg-brand-gap:4px; } }

/*
 * Keep rem-based public content on the same 16px baseline. XStore can lower
 * the root size at responsive breakpoints, which makes otherwise valid 1rem
 * article copy render below the HiGuppy readability floor.
 */
html:not(#hg-typography-root):not(#hg-typography-root-a):not(#hg-typography-root-b) {
    font-size: var(--hg-font-size-body);
}

body.higuppy-site-shell {
    --hg-navy: var(--higuppy-canonical-navy);
    --hg-blue: var(--higuppy-canonical-blue);
    --hg-teal: var(--higuppy-canonical-aqua);
    --hg-aqua: var(--higuppy-canonical-aqua);
    --hg-coral: var(--higuppy-canonical-coral);
    --hg-soft: var(--higuppy-canonical-soft);
    --hg-muted: var(--higuppy-canonical-muted);
    --hg-line: var(--higuppy-canonical-line);
    /* Unified site typography: one readable body size and dark text. */
    --hg-text: #111827;
    --hg-muted: #111827;
    --higuppy-canonical-muted: #111827;
    color: #111827;
    font-family: var(--hg-font-family);
    font-size: var(--hg-font-size-body);
    font-weight: var(--hg-font-weight-body);
    line-height: var(--hg-line-height-body);
    background: var(--hg-white);
    overflow-wrap: break-word;
}

body.higuppy-site-shell :is(h1, h2, h3, h4, h5, h6) {
    color: var(--hg-navy);
    font-family: var(--hg-font-family);
    line-height: var(--hg-line-height-heading);
    text-wrap: balance;
}

body.higuppy-site-shell :is(p, li) {
    color: #111827;
    font-size: var(--hg-font-size-body);
    font-weight: var(--hg-font-weight-body);
}

body.higuppy-site-shell :is(.has-text-color.has-hg-muted-color, .hg-muted) {
    color: #111827 !important;
    font-size: var(--hg-font-size-body);
    font-weight: var(--hg-font-weight-label);
}

body.higuppy-site-shell :is(button, input, select, textarea) {
    font: inherit;
}

body.higuppy-site-shell :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(21, 191, 208, 0.42);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    body.higuppy-site-shell *,
    body.higuppy-site-shell *::before,
    body.higuppy-site-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * Final typography normalization.
 *
 * The three impossible ID exclusions deliberately provide enough specificity
 * to beat legacy first-party route selectors without relying on !important.
 * The stylesheet remains valid for every real body because none of these IDs
 * are ever assigned.
 */
body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) {
    /*
     * XStore and WooCommerce apply some preset classes with !important.
     * Normalize the preset values themselves so those third-party declarations
     * resolve to the HiGuppy token scale without another important override.
     */
    --wp--preset--font-size--small: var(--hg-font-size-body);
    --wp--preset--font-size--body: var(--hg-font-size-body);
    --wp--preset--font-size--et-fse-basic: var(--hg-font-size-body);
    --wp--preset--font-size--et-fse-small: var(--hg-font-size-body);
    --wp--preset--font-size--et-fse-medium: var(--hg-font-size-body);
    --wp--preset--font-size--et-fse-heading-1: var(--hg-font-size-h1);
    --wp--preset--font-size--et-fse-heading-2: var(--hg-font-size-h2);
    --wp--preset--font-size--et-fse-heading-3: var(--hg-font-size-h3);
    --wp--preset--font-size--et-fse-heading-4: var(--hg-font-size-h4);
    color: #111827 !important;
    font-family: var(--hg-font-family);
    font-size: var(--hg-font-size-body);
    font-weight: var(--hg-font-weight-body);
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) :is(h1, h2, h3, h4, h5, h6,
    p, li, strong, small, label, summary, td, th, figcaption,
    blockquote, cite) {
    color: #111827 !important;
}

/* Collections page: navy headings instead of global ink. */
body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) .hg-collections :is(h1, h2, h3) {
    color: #081f4a !important;
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) :is(p, li, small, label, summary, td, th,
    figcaption, blockquote, cite) {
    font-family: var(--hg-font-family);
    font-size: var(--hg-font-size-body);
    font-weight: var(--hg-font-weight-body);
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) :where(
    a, button, input, select, textarea, option, label, summary,
    p, li, dt, dd, small, strong, b, em, i, span, td, th, aside,
    figcaption, blockquote, cite
) {
    font-family: var(--hg-font-family);
    font-size: var(--hg-font-size-body);
}

body.higuppy-site-shell a:not(.hg-btn-primary):not(.hg-btn-secondary):not(.hg-wow-btn--primary):not(.higuppy-sidebar-cart__suggestion-add):not(.add_to_cart_button):not(.ajax_add_to_cart):not(.hg-collections__chip):not(.hg-collection-card__button):not(.hg-collections__button):not(.hg-category-button):not(.hg-category-nav__item):not(.hg-shop-visual-hero__button):not(.hg-404__button):not(.higuppy-sidebar-cart__continue-shopping) {
    color: #111827 !important;
}

/* Deep-blue contact help chips must keep white text over the global link ink rule. */
body.higuppy-site-shell .hg-contact-v2 .hg-contact-v2__help-grid a:not(.hg-btn-primary):not(.hg-btn-secondary):not(.hg-wow-btn--primary),
body.higuppy-site-shell .hg-contact-v2 .hg-contact-v2__help-grid a:not(.hg-btn-primary):not(.hg-btn-secondary):not(.hg-wow-btn--primary):hover,
body.higuppy-site-shell .hg-contact-v2 .hg-contact-v2__help-grid a:not(.hg-btn-primary):not(.hg-btn-secondary):not(.hg-wow-btn--primary):focus,
body.higuppy-site-shell .hg-contact-v2 .hg-contact-v2__help-grid a:not(.hg-btn-primary):not(.hg-btn-secondary):not(.hg-wow-btn--primary):visited {
    color: #fff !important;
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) h1 {
    --wp--preset--font-size--small: var(--hg-font-size-h1);
    --wp--preset--font-size--body: var(--hg-font-size-h1);
    --wp--preset--font-size--et-fse-small: var(--hg-font-size-h1);
    --wp--preset--font-size--et-fse-medium: var(--hg-font-size-h1);
    --wp--preset--font-size--et-fse-heading-2: var(--hg-font-size-h1);
    --wp--preset--font-size--et-fse-heading-3: var(--hg-font-size-h1);
    font-size: var(--hg-font-size-h1);
    font-weight: var(--hg-font-weight-h1);
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) h2 {
    --wp--preset--font-size--small: var(--hg-font-size-h2);
    --wp--preset--font-size--body: var(--hg-font-size-h2);
    --wp--preset--font-size--et-fse-small: var(--hg-font-size-h2);
    --wp--preset--font-size--et-fse-medium: var(--hg-font-size-h2);
    --wp--preset--font-size--et-fse-heading-3: var(--hg-font-size-h2);
    --wp--preset--font-size--et-fse-heading-4: var(--hg-font-size-h2);
    font-size: var(--hg-font-size-h2);
    font-weight: var(--hg-font-weight-h2);
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) h3 {
    --wp--preset--font-size--small: var(--hg-font-size-h3);
    --wp--preset--font-size--body: var(--hg-font-size-h3);
    --wp--preset--font-size--et-fse-small: var(--hg-font-size-h3);
    --wp--preset--font-size--et-fse-medium: var(--hg-font-size-h3);
    --wp--preset--font-size--et-fse-heading-4: var(--hg-font-size-h3);
    font-size: var(--hg-font-size-h3);
    font-weight: var(--hg-font-weight-h3);
}

/*
 * Card / step titles are subordinate to section H2 (25px). Keep them at body
 * scale so short Baloo titles do not optically overpower the section heading.
 */
body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) :is(
    .ship-card,
    .ship-step,
    .ship-related .ship-card,
    .doa-card,
    .hg-card
) h3 {
    font-size: var(--hg-font-size-body) !important;
    font-weight: var(--hg-font-weight-ui);
    line-height: 1.3;
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) h4 {
    font-size: var(--hg-font-size-h4);
    font-weight: var(--hg-font-weight-h3);
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) h5 {
    font-size: var(--hg-font-size-h5);
    font-weight: var(--hg-font-weight-h3);
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) h6 {
    font-size: var(--hg-font-size-h6);
    font-weight: var(--hg-font-weight-h3);
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) :is(h1, h2, h3, h4, h5, h6) * {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) :is(button, input, select, textarea, [role="button"]) {
    font-family: var(--hg-font-family);
    font-size: var(--hg-font-size-body);
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) :is(button, [role="button"]) {
    font-weight: var(--hg-font-weight-ui);
}

body.higuppy-site-shell:not(#hg-typography-contract):not(#hg-typography-contract-a):not(#hg-typography-contract-b) .wc-block-components-notice-banner__content {
    font-family: var(--hg-font-family);
    font-size: var(--hg-font-size-body);
}

/* Brand rule: orange/coral and deep-green buttons always use white text */
html body.higuppy-site-shell a.hg-wow-btn--primary,
html body.higuppy-site-shell nav#hgSiteNav.hg-nav .hg-menu-spotlight__cta,
html body.higuppy-site-shell nav#hgSiteNav.hg-nav .hg-menu-spotlight__cta:hover,
html body.higuppy-site-shell nav#hgSiteNav.hg-nav .hg-menu-spotlight__cta:focus-visible,
html body.higuppy-site-shell nav#hgSiteNav.hg-nav .hg-menu-spotlight__cta:active,
html body.higuppy-site-shell a.hg-blog-card__read-more,
html body.higuppy-site-shell a.hg-bl__read,
html body.higuppy-site-shell a.hg-btn-primary,
html body.higuppy-site-shell a.hg-btn-secondary,
html body.higuppy-site-shell .hg-wow-product__cart,
html body.higuppy-site-shell .hg-wow-product__buy,
html body.higuppy-site-shell .hg-wow-spotlight a,
html body.higuppy-site-shell a.hg-search-card__btn,
html body.higuppy-site-shell a[style*="background"],
html body.higuppy-site-shell .hg-hybrid-blog-btn:hover,
html body.higuppy-site-shell a.higuppy-sidebar-cart__suggestion-add,
html body.higuppy-site-shell a.higuppy-sidebar-cart__suggestion-add:hover,
html body.higuppy-site-shell a.higuppy-sidebar-cart__suggestion-add:focus-visible,
html body.higuppy-site-shell a.higuppy-sidebar-cart__suggestion-add:visited,
html body.higuppy-site-shell a.add_to_cart_button,
html body.higuppy-site-shell a.add_to_cart_button:hover,
html body.higuppy-site-shell a.add_to_cart_button:focus-visible,
html body.higuppy-site-shell a.add_to_cart_button:visited,
html body.higuppy-site-shell a.ajax_add_to_cart,
html body.higuppy-site-shell .wc-block-components-button,
html body.higuppy-site-shell .wc-block-components-checkout-place-order-button,
html body.higuppy-site-shell .wp-block-woocommerce-proceed-to-checkout-block a,
html body.higuppy-site-shell .wc-proceed-to-checkout .checkout-button,
html body.higuppy-site-shell #place_order,
html body.higuppy-site-shell .hg-cart-btn--primary,
html body.higuppy-site-shell .hg-cart-btn--ghost,
html body.higuppy-site-shell .higuppy-sidebar-cart a.button,
html body.higuppy-site-shell .higuppy-sidebar-cart button[type="submit"],
html body.higuppy-site-shell .higuppy-sidebar-cart .checkout-button,
html body.higuppy-site-shell .higuppy-sidebar-cart .wc-forward {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Site typography: one body/UI family and one display family, every template. */
@layer hg-type {
  body.higuppy-site-shell {
    --hg-font-family: var(--hg-shared-body) !important;
    font-family: var(--hg-shared-body) !important;
  }
  /* The care page retains an immutable legacy stylesheet URL in stored markup. */
  body.higuppy-site-shell.page-id-1518 { --care-serif: var(--hg-shared-heading) !important; }
  body.higuppy-site-shell :where(p,li,dt,dd,label,button,input,textarea,select,table,figcaption,a,summary) { font-family: var(--hg-shared-body) !important; }
  body.higuppy-site-shell :where(h1,h2,h3,h4,h5,h6) { font-family: var(--hg-shared-heading) !important; }
  body.higuppy-site-shell :is(h1,h2,h3,h4,h5,h6) > :is(a,span,em,strong):not(.dashicons):not([class*="icon"]):not([class*="fa-"]) { font-family: inherit !important; }
  body.higuppy-site-shell :is(.na2-product h3,.hg-v3-related-body h3,li.wc-block-product>.wp-block-post-title,.woocommerce-loop-product__title) {
    font-family: var(--hg-shared-body) !important; font-size: 16px !important;
    font-weight: 650 !important; line-height: 1.4 !important; letter-spacing: normal !important;
  }
  body.higuppy-site-shell :is(.price,.na2-price,.hg-v3-related-price,.wc-block-components-product-price,.nb-card-meta,.nb-stock,.na2-stock) { font-family: var(--hg-shared-body) !important; }
  body.higuppy-site-shell :is(.product-filters-wrapper,.hg-footer-nav) :is(h2,h3,h4) { font-family: var(--hg-shared-body) !important; }
  body.higuppy-site-shell .hg-site-footer .hg-footer-logo span { font-family: var(--hg-shared-heading) !important; }
  @media(max-width:600px) {
    body.higuppy-site-shell :is(.na2-product h3,.hg-v3-related-body h3,li.wc-block-product>.wp-block-post-title,.woocommerce-loop-product__title) { font-size: 16px !important; line-height: 1.4 !important; }
  }
}