/* ============================================================
   BLEND PIXEL STUDIO — foundation.css v1.0
   "Viewport" design system foundation layer.

   Loaded LAST on every page (see functions.php Section 2C) so
   this file's :root re-declarations and component rules win the
   cascade over custom.css / home.css / navbar.css / footer.css /
   account.css / licenses.css / faq.css / about.css / support.css /
   wishlist.css — all of which independently define --bg/--acc/
   --s1 etc with their own hardcoded values. Redeclaring those
   names here, once, in the last-loaded file is what makes this
   the real single source of truth without editing ten other
   files directly.

   Canonical color/font values live in functions.php's inline
   critical CSS (--vp-* tokens) so they apply with zero latency —
   this file just points every legacy token name at them.
   ============================================================ */

/* -----------------------------------------------------------
   1. TOKEN UNIFICATION
   Every one of these names is already consumed (via var()) by
   the existing stylesheets — redeclaring them here retargets
   every page at once without touching those files.
----------------------------------------------------------- */
:root{
    --bg:var(--vp-ink);--s1:var(--vp-panel);--s2:var(--vp-panel-2);--s3:var(--vp-panel-3);--s4:var(--vp-panel-3);
    --bd:var(--vp-border);--bdh:var(--vp-border-hover);
    --acc:var(--vp-signal);--acc-l:var(--vp-signal-light);--acc-d:var(--vp-signal-dark);
    --acc-glow:var(--vp-signal-glow);--acc-bg:rgba(239,176,125,0.07);
    --ok:var(--vp-ok);--err:var(--vp-err);
    --t1:var(--vp-text-1);--t2:var(--vp-text-2);--t3:var(--vp-text-3);
    --sh:0 1px 0 rgba(255,255,255,.03) inset;--sh-l:0 20px 60px rgba(0,0,0,.55);
    --discord:#5865f2;
    /* account.css uses its own --ac-* prefix */
    --ac-bg:var(--vp-ink);--ac-s1:var(--vp-panel);--ac-s2:var(--vp-panel-2);--ac-s3:var(--vp-panel-3);--ac-s4:var(--vp-panel-3);
    --ac-bd:var(--vp-border);--ac-bdh:var(--vp-border-hover);
    --ac-acc:var(--vp-signal);--ac-acc-l:var(--vp-signal-light);
    --ac-acc-g:var(--vp-signal-glow);--ac-acc-s:rgba(62,217,196,0.06);
    --ac-ok:var(--vp-ok);--ac-err:var(--vp-err);--ac-warn:#fbbf24;
    --ac-t1:var(--vp-text-1);--ac-t2:var(--vp-text-2);--ac-t3:var(--vp-text-3);
}
html[data-theme="light"]{
    --bg:var(--vp-ink);--s1:var(--vp-panel);--s2:var(--vp-panel-2);--s3:var(--vp-panel-3);--s4:var(--vp-panel-3);
    --bd:var(--vp-border);--bdh:var(--vp-border-hover);
    --t1:var(--vp-text-1);--t2:var(--vp-text-2);--t3:var(--vp-text-3);
    --ac-bg:var(--vp-ink);--ac-s1:var(--vp-panel);--ac-s2:var(--vp-panel-2);--ac-s3:var(--vp-panel-3);
    --ac-bd:var(--vp-border);--ac-bdh:var(--vp-border-hover);
    --ac-t1:var(--vp-text-1);--ac-t2:var(--vp-text-2);--ac-t3:var(--vp-text-3);
}

/* -----------------------------------------------------------
   2. TYPE SYSTEM
   The Google Fonts request itself now brings in Bricolage
   Grotesque + Inter + IBM Plex Mono instead of Space Grotesk —
   these rules point every existing "-title/-heading/-name"-suffixed
   class (which covers the large majority of this codebase's own
   naming convention) at the new display face, plus an explicit
   list for the handful of headings that don't follow that pattern.
   !important is deliberate: overriding a font swap sitewide is
   exactly the kind of broad, intentional override this codebase
   already reaches for throughout its own critical CSS.
----------------------------------------------------------- */
h1,h2,h3,h4,h5,h6,
[class*="-title"]:not(input):not(select):not(textarea),
[class*="-heading"]:not(input):not(select):not(textarea),
[class*="-name"]:not(input):not(select):not(textarea),
.bps-header-logo-text,.bps-auth-site-name,.bps-sidebar-text-brand,
.bps-footer-logo-text,.bps-discord-title,.bps-newsletter-title{
    font-family:var(--vp-font-display)!important;
    font-weight:700!important;
    letter-spacing:-0.01em;
}
/* Prices keep numeric alignment better in the mono face — also
   reinforces "this number is a real spec," same reasoning as the
   product spec chips below. */
.ith-price,.ith-price-sale,.ith-price-free,.bps-price,.bps-price-sale,
.bps-pack-price,.bps-pack-price-sale,.bps-deepdive-price,.bps-hero-card-price,
.ith-seat-total-price,.bps-co-totals .order-total td,.bps-wc-totals .order-total td{
    font-family:var(--vp-font-mono)!important;
    font-weight:600!important;
    letter-spacing:-0.01em;
}
body,input,textarea,select,button{
    font-family:var(--vp-font-body);
}
/* Technical spec chips (polygons/meshes/textures on the product
   page) — the one place a monospace label is grounded in genuinely
   technical content rather than decoration. */
.ith-spec-value,.ith-spec-label,.bps-badge-assets,.bps-item-var,.bps-co-item-var{
    font-family:var(--vp-font-mono);
}

/* -----------------------------------------------------------
   3. ELEVATION — replaces dark-on-dark box-shadows
   rgba(0,0,0,.5) shadows on a near-black background barely
   register: there's almost no luminance gap for the eye to read
   as "raised." Elevation here comes from stepping up the surface
   tone (--s1 ? --s2 ? --s3) plus a 1px inset top highlight,
   which is what --sh now resolves to (Section 1). Real drop
   shadows are reserved for genuinely floating layers — dropdowns,
   modals — where --sh-l still provides one.
----------------------------------------------------------- */
.woocommerce ul.products li.product,
.bps-item,.bps-summary-box,.bps-co-summary-card,.bps-co-section,
.bps-hero-card,.bps-pack-card,.bps-free-card,.bps-ec-card,
.bps-lic-card,.bps-lic-plan,.bps-lic-refund-card,.bps-faq-item,
.bps-support-quick-card,.bps-support-form-card,.bps-support-side-card,
.bps-linked-accounts,.bps-auth-card,.bps-newsletter-card,
.bps-ic,.bps-qs-item{
    box-shadow:var(--sh)!important;
    transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.woocommerce ul.products li.product:hover,
.bps-item:hover,.bps-hero-card:hover,.bps-pack-card:hover,
.bps-free-card:hover,.bps-ec-card:hover,.bps-lic-card:hover,
.bps-lic-plan:hover,.bps-lic-refund-card:hover,.bps-qs-item:hover,.bps-ic:hover{
    background-color:var(--s2)!important;
    box-shadow:var(--sh)!important;
}
/* Genuinely floating layers keep a real shadow, now against a
   lighter panel tone so it actually reads. */
.bps-dropdown,.bps-search-box-inner,.bps-mobile-drawer{
    box-shadow:var(--sh-l)!important;
}

/* -----------------------------------------------------------
   4. ONE BUTTON SYSTEM
   Replaces five overlapping "primary button" definitions
   (.bps-btn-primary / .ith-add-to-cart / .bps-checkout-cta /
   .bps-empty-cta / #place_order) that had drifted to slightly
   different padding and sizing. Existing class names are kept as
   selectors (so no template needs editing) — only the shared
   declaration is new.
----------------------------------------------------------- */
.bps-btn-primary,.bps-empty-cta,.bps-checkout-cta,.bps-hero-card-cta,
.ith-add-to-cart,.single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button,
#place_order,.bps-payment-block #place_order,
.bps-lic-cta-btn,.bps-support-quick-card:hover{
    background:var(--acc)!important;
    color:#000!important;
    border:none!important;
    border-radius:var(--r,10px)!important;
    font-family:var(--vp-font-display)!important;
    font-weight:700!important;
    box-shadow:none!important;
    transition:background-color .2s ease,transform .2s ease!important;
}
.bps-btn-primary:hover,.bps-empty-cta:hover,.bps-checkout-cta:hover,
.ith-add-to-cart:hover,.single_add_to_cart_button:hover,
#place_order:hover,.bps-lic-cta-btn:hover{
    background:var(--acc-l)!important;
    color:#000!important;
    transform:translateY(-2px);
}
.bps-btn-outline,.bps-btn-secondary{
    border-color:rgba(62,217,196,0.35)!important;
    color:var(--acc)!important;
}
.bps-btn-outline:hover,.bps-btn-secondary:hover{
    background:var(--acc-bg)!important;
    border-color:var(--acc)!important;
    color:var(--acc-l)!important;
}

/* -----------------------------------------------------------
   5. BADGE RESTRAINT
   The accent was doing every job — sale badges, "new," engine
   compatibility, spec chips, ratings — all in the same color.
   Signal (cyan) now means "act on this" only. Informational
   badges (engine compatibility, spec values) move to a neutral
   surface tone; Ember stays for genuine status (sale/new/warn).
----------------------------------------------------------- */
.ith-engine-badge,.ith-spec-item,.bps-chip,.bps-dropdown-count,
.bps-lic-meta-item,.bps-support-status{
    background:var(--s2)!important;
    border-color:var(--bd)!important;
    color:var(--t2)!important;
}
.ith-engine-compat{
    background:rgba(74,222,128,.12)!important;
    border-color:rgba(74,222,128,.25)!important;
    color:var(--ok)!important;
}
.bps-badge-sale,.bps-pack-badge--sale,.ith-badge-sale-inline,.bps-free-badge,
.bps-pack-badge--free,.bps-badge-free{
    background:var(--vp-ember)!important;
    color:#000!important;
}

/* -----------------------------------------------------------
   6. FOCUS STATES
   Explicit, consistent keyboard-focus ring in the signal color —
   several interactive elements across the codebase had no
   visible :focus-visible treatment at all.
----------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--acc);
    outline-offset:2px;
}