/**
 * 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;

    /* 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: 1160px;
    --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;
}

/*
 * 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;
}