/*
 * Wapu Theme Design System · Foundations 2.0
 *
 * Identity owner: WTDS. Playground is block-local only.
 * Storefront output: WTDS semantic roles.
 * Interaction engine: Material reference contracts.
 *
 * This layer intentionally avoids page/layout selectors and literal UI paint.
 * The current storefront appearance remains owned by wtds.css while legacy
 * compatibility paint is retired incrementally.
 */

/* Shared storefront scrollbars, including scrollable pop-ups and sheets.
 * Component rules with scrollbar-width:none keep intentional hidden tracks. */
:where(html, body, body *) {
  scrollbar-width: thin;
  scrollbar-color: var(--wtds-separator) transparent;
}
:where(html, body, body *)::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
:where(html, body, body *)::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--wtds-separator);
}
:where(html, body, body *)::-webkit-scrollbar-track {
  background: transparent;
}

:root {
  /* ── Storefront action identity: WTDS owns the primary action seed. ── */
  --wtds-brand-primary: #000000;
  --wtds-brand-on-primary: #ffffff;
  --wtds-brand-secondary: var(--wtds-surface-2);
  --wtds-brand-on-secondary: var(--wtds-ink);

  --wtds-font-display-fallback: var(--wtds-font-native-display, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --wtds-font-text-fallback: var(--wtds-font-native-text, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --wtds-font-help-fallback: var(--wtds-font-text-fallback);
  /* Storefront typography is fixed by WTDS; Playground font presets stay block-local. */
  --wtds-font-display: var(--wtds-font-display-fallback);
  --wtds-font-text: var(--wtds-font-text-fallback);
  --wtds-font-help: var(--wtds-font-help-fallback);
  --wtds-font-system-owned: var(--wtds-font-native-text, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

  /* P4 Soft compatibility scale; WTDS storefront identity remains authoritative. */
  --wtds-space-2xs: .125rem;
  --wtds-space-xs: .25rem;
  --wtds-space-sm: .5rem;
  --wtds-space-md: .75rem;
  --wtds-space-base: 1rem;
  --wtds-space-lg: 1.5rem;
  --wtds-space-xl: 2rem;
  --wtds-space-2xl: 3rem;
  --wtds-space-section: 4rem;
  --wtds-r-xs: .5rem;
  --wtds-r-sm: .75rem;
  --wtds-r-md: 1rem;
  --wtds-r-lg: 1.25rem;
  --wtds-r-xl: 1.75rem;
  --wtds-shadow-xs: 0 1px .1875rem color-mix(in srgb, var(--wtds-ink) 4%, transparent), 0 1px .125rem color-mix(in srgb, var(--wtds-ink) 2.5%, transparent);
  --wtds-shadow-sm: 0 .125rem .5rem color-mix(in srgb, var(--wtds-ink) 4.5%, transparent), 0 1px .125rem color-mix(in srgb, var(--wtds-ink) 3%, transparent);
  --wtds-shadow-md: 0 .625rem 1.875rem color-mix(in srgb, var(--wtds-ink) 7.5%, transparent), 0 .125rem .5rem color-mix(in srgb, var(--wtds-ink) 3.5%, transparent);
  --wtds-shadow-lg: 0 1.25rem 3.5rem color-mix(in srgb, var(--wtds-ink) 11%, transparent), 0 .25rem 1rem color-mix(in srgb, var(--wtds-ink) 4.5%, transparent);
  --wtds-shadow-xl: 0 1.75rem 4.5rem color-mix(in srgb, var(--wtds-ink) 14%, transparent), 0 .5rem 1.5rem color-mix(in srgb, var(--wtds-ink) 5%, transparent);

  /* ── Soft typography contract 1.0. ────────────────────────────────── */
  --wtds-fw-body: 400;
  --wtds-fw-medium: 450;
  --wtds-fw-ui: 450;
  --wtds-fw-heading: 500;
  --wtds-fw-emphasis: 500;
  --wtds-fw-strong-max: 500;

  /* Comfort typography: less visual pressure in dense storefront UI. */
  --wtds-lh-snug: 1.38;
  --wtds-lh-base: 1.5;
  --wtds-lh-relax: 1.62;

  /* Responsive comfort scale. Values grow gently without changing the .5rem grid. */
  --wtds-comfort-gap-sm: clamp(.625rem, .35vw + .55rem, .75rem);
  --wtds-comfort-gap-md: clamp(.875rem, .55vw + .75rem, 1.125rem);
  --wtds-comfort-gap-lg: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  --wtds-comfort-section: clamp(1.5rem, 1.5vw + 1.1rem, 2.25rem);
  --wtds-comfort-inline: clamp(1rem, 2.2vw, 2rem);
  --wtds-container-sm: 40rem;
  --wtds-container-md: 52rem;
  --wtds-container-lg: 70rem;
  --wtds-container-xl: 90rem;
  --wtds-container-wide: 100rem;
  --wtds-control-min: 2.5rem;      /* 40px · default visible control */
  --wtds-control-compact: 2.25rem;  /* 36px · icon / dense secondary control */
  --wtds-control-large: 2.75rem;    /* 44px · primary / prominent action */
  --wtds-hit-target: 2.75rem;       /* interaction guidance; do not use as visual size */

  /* Storefront compatibility aliases: one WTDS vocabulary, no orphan tokens. */
  --wtds-border-medium: var(--wtds-border-thick);
  --wtds-ease-standard: var(--wtds-motion-easing-default);
  --wtds-focus-ring: var(--wtds-shadow-focus);
  --wtds-header-full-h: 4.5rem;
  --wtds-page-gutter: var(--wtds-space-lg);
  --wtds-text-sm: var(--wtds-fs-footnote);

  /* Buttons are Theme/WTDS-owned. Playground no longer controls geometry. */
  --wtds-button-radius: .5rem;
  --wtds-quantity-step-bg: #F3F4F6;
  --wtds-quantity-step-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --wtds-font-heading: var(--wtds-font-display);
  --wtds-font-body: var(--wtds-font-text);
  --wtds-control-radius: var(--wtds-r-sm);
  --wtds-field-radius: .5rem; /* Core --wos-radius-control: 8px. */
  /* Form controls ported from Core's semantic field contract. Theme owns these roles. */
  --wtds-field-gap: .375rem;
  --wtds-field-height: var(--wtds-control-large);
  --wtds-field-padding-block: .375rem;
  --wtds-field-padding-inline: .75rem;
  --wtds-field-border: var(--wtds-outline-soft);
  --wtds-field-border-hover: var(--wtds-outline-strong);
  --wtds-field-border-focus: var(--wtds-focus);
  --wtds-field-border-error: var(--wtds-danger);
  --wtds-field-border-success: var(--wtds-success);
  --wtds-field-ring-focus: color-mix(in srgb, var(--wtds-focus) 22%, transparent);
  --wtds-field-ring-error: color-mix(in srgb, var(--wtds-danger) 18%, transparent);
  --wtds-field-ring-success: color-mix(in srgb, var(--wtds-success) 18%, transparent);
  --wtds-field-bg: var(--wtds-surface);
  --wtds-field-bg-disabled: var(--wtds-surface-container);
  --wtds-field-text: var(--wtds-on-surface);
  --wtds-field-helper: var(--wtds-on-surface-muted);
  --wtds-card-radius: var(--wtds-r-lg);
  --wtds-panel-radius: var(--wtds-r-xl);

  /* ── Brand/action palette derived from the primary seed. ──────────── */
  --wtds-primary: var(--wtds-brand-primary);
  --wtds-primary-ink: var(--wtds-brand-on-primary);
  --wtds-primary-hover: color-mix(in oklch, var(--wtds-primary) 92%, var(--wtds-ink));
  --wtds-primary-pressed: color-mix(in oklch, var(--wtds-primary) 84%, var(--wtds-ink));
  --wtds-danger-pressed: color-mix(in oklch, var(--wtds-danger) 84%, var(--wtds-ink));
  --wtds-primary-soft: color-mix(in oklch, var(--wtds-primary) 12%, transparent);
  --wtds-accent: #000000;
  --wtds-accent-soft: color-mix(in srgb, var(--wtds-accent) 12%, transparent);
  --wtds-accent-border: color-mix(in srgb, var(--wtds-accent) 28%, transparent);
  --wtds-accent-ink: #ffffff;
  --wtds-primary-container: color-mix(in oklch, var(--wtds-primary) 12%, var(--wtds-surface));
  --wtds-on-primary-container: color-mix(in oklch, var(--wtds-primary) 74%, var(--wtds-ink));
  --wtds-link: var(--wtds-primary);
  --wtds-focus: var(--wtds-primary);
  --wtds-action: var(--wtds-primary);
  --wtds-action-pressed: var(--wtds-primary-pressed);
  --wtds-action-soft: var(--wtds-primary-soft);
  --wtds-action-ink: var(--wtds-primary-ink);

  /* ── Canonical surface/content vocabulary. ────────────────────────── */
  --wtds-surface-container-lowest: var(--wtds-surface);
  --wtds-surface-container-low: var(--wtds-surface);
  --wtds-surface-container: var(--wtds-surface-2);
  --wtds-surface-container-high: var(--wtds-surface-3);
  --wtds-on-surface: var(--wtds-ink);
  --wtds-on-surface-muted: var(--wtds-ink-3);
  --wtds-on-surface-subtle: var(--wtds-ink-4);
  --wtds-placeholder: color-mix(in srgb, var(--wtds-on-surface) 28%, transparent);
  --wtds-outline: var(--wtds-separator);
  --wtds-outline-soft: var(--wtds-separator-soft);
  --wtds-outline-strong: var(--wtds-separator-strong);
  --wtds-text-muted: var(--wtds-on-surface-muted);
  --wtds-border: var(--wtds-outline);
  --wtds-fill-5: color-mix(in srgb, var(--wtds-on-surface) 4%, transparent);

  /* ── Canonical interaction states. Theme/WTDS owns action semantics. ── */
  --wtds-state-hover-bg: var(--wtds-hover-soft);
  --wtds-state-hover-border: var(--wtds-outline-soft);
  --wtds-state-active-bg: var(--wtds-fill-3);
  --wtds-state-active-border: var(--wtds-outline);
  --wtds-state-selected-bg: var(--wtds-primary-soft);
  --wtds-state-selected-text: var(--wtds-on-surface);
  --wtds-state-selected-border: var(--wtds-primary);
  --wtds-state-disabled-opacity: var(--md-ref-state-disabled-opacity);

  /* ── Material reference aliases: engineering only. ───────────────── */
  --wtds-motion-fast: 140ms;
  --wtds-motion-normal: 180ms;
  --wtds-motion-slow: 260ms;
  --wtds-motion-slower: 360ms;
  --wtds-motion-easing-default: var(--md-ref-motion-easing-standard);
  --wtds-motion-easing-out: var(--md-ref-motion-easing-decelerate);
  --wtds-motion-easing-in: var(--md-ref-motion-easing-accelerate);
  --wtds-touch-target: var(--md-ref-touch-target);
  --wtds-icon-sm: var(--md-ref-icon-sm);
  --wtds-icon-md: var(--md-ref-icon-md);
  --wtds-icon-lg: var(--md-ref-icon-lg);
}

/* Dark mode keeps the neutral primary legible against dark surfaces. */
.wapu-theme-dark {
  --wtds-brand-primary: #ffffff;
  --wtds-brand-on-primary: #000000;
  --wtds-primary-container: color-mix(in oklch, var(--wtds-primary) 22%, var(--wtds-surface-2));
  --wtds-on-primary-container: color-mix(in oklch, var(--wtds-primary) 54%, var(--wtds-ink));
  --wtds-primary-soft: color-mix(in oklch, var(--wtds-primary) 18%, transparent);
}


@media (pointer: coarse) {
  :root {
    /* Keep visual density stable on touch devices. Hit-area policy is separate. */
    --wtds-hit-target: var(--wtds-touch-target, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wtds-motion-fast: 0ms;
    --wtds-motion-normal: 0ms;
    --wtds-motion-slow: 0ms;
    --wtds-motion-slower: 0ms;
  }
}

/* Keep typography soft and predictable across variable and Playground fonts. */
html { font-synthesis: none; }


/* Transactional surfaces inherit the same fixed WTDS typography. */
:where(body.woocommerce-account, body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-pay-page) {
  font-family: var(--wtds-font-text);
}

:where(
  .woocommerce-notices-wrapper,
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info,
  .wapu-alert,
  .wapu-notice,
  .wapu-toast,
  .wapu-single__toast,
  .wapu-cart-undo-toast,
  .wapu-checkout-toast,
  #wapu-qv-toast,
  [data-wapu-toast],
  [role="alert"].wapu-ui-feedback,
  [role="status"].wapu-ui-feedback
) {
  font-family: var(--wtds-font-text);
}

/* Theme titles that do not declare a family in their component stylesheet. */
:where(
  .wapu-accordion__title,
  .wapu-address-card__title,
  .wapu-cart-edit-modal__heading,
  .wapu-cart-line__title,
  .wapu-cart-totals__title,
  .wapu-checkout-section-card__title,
  .wapu-choice-card__title,
  .wapu-dialog__heading,
  .wapu-food-nutrition__title,
  .wapu-fragrance-pyramid__title,
  .wapu-list-item__title,
  .wapu-mini-cart__title,
  .wapu-mobile-catalog-drawer__title,
  .wapu-not-found__title,
  .wapu-product-faqs__title,
  .wapu-product-promo__title,
  .wapu-product-row__title,
  .wapu-stepper__title,
  .wapu-summary__heading,
  .wapu-sv-figma__heading,
  .woocommerce-column__title,
  .woocommerce-order-details__title,
  .woocommerce-order-downloads__title,
  .woocommerce-products-header__title
) {
  font-family: var(--wtds-font-display);
}

/* Theme descriptions and help copy use the same Poppins family as titles. */
:where(
  .wa-checkout-option__desc,
  .wapu-account-logged__help,
  .wapu-account-orders__subtitle,
  .wapu-account-view-order__subtitle,
  .wapu-checkout-login-modal__description,
  .wapu-checkout-review__subtitle,
  .wapu-checkout-section-card__description,
  .wapu-checkout-shipping__hint,
  .wapu-choice-card__description,
  .wapu-switch__help,
  .wapu-choice__description,
  .wapu-radio-group__description,
  .wapu-downloads__subtitle,
  .wapu-edit-account__helper,
  .wapu-edit-account__subtitle,
  .wapu-edit-address__subtitle,
  .wapu-field__help,
  .wapu-field__helper,
  .wapu-dialog__description,
  .wapu-link-page__subtitle,
  .wapu-list-item__subtitle,
  .wapu-loyalty-points__caption,
  .wapu-my-address__subtitle,
  .wapu-popover__description,
  .wapu-not-found__description,
  .wapu-pay-acumulados__subtitle,
  .wapu-product-option-group__help,
  .wapu-stepper__description,
  .wapu-transparencia__subtitle
) {
  font-family: var(--wtds-font-help);
}

/* 7.7.79 · Canonical text-button tokens · Figma 6636:4226 */
:root{
  --wtds-button-standard-radius:0;
  --wtds-button-standard-font-family:'Poppins',sans-serif;
  --wtds-button-standard-font-size:.875rem;
  --wtds-button-standard-font-weight:500;
  --wtds-button-standard-line-height:1;
  --wtds-button-standard-letter-spacing:2px;
  --wtds-button-standard-text-transform:uppercase;
  --wtds-button-standard-padding:.375rem 1rem;
  --wtds-button-standard-min-height:2.0625rem;
  --wtds-button-standard-small-height:2.125rem;
  --wtds-button-standard-large-height:2.75rem;
  --wtds-button-standard-primary-bg:#000;
  --wtds-button-standard-primary-ink:#fff;
  --wtds-button-standard-secondary-bg:transparent;
  --wtds-button-standard-secondary-ink:#171717;
  --wtds-button-standard-inactive-bg:#f9fafb;
  --wtds-button-standard-inactive-ink:#121212;
  --wtds-button-standard-stroke:rgba(23,23,23,.3);
  --wtds-button-standard-danger-bg:#fef3f3;
  --wtds-button-standard-danger-ink:#e10e0e;
  --wtds-button-standard-danger-stroke:rgba(248,144,144,.6);
}
.wapu-theme-dark{
  --wtds-button-standard-primary-bg:#000;
  --wtds-button-standard-primary-ink:#fff;
  --wtds-button-standard-inactive-bg:var(--wtds-surface-2);
  --wtds-button-standard-inactive-ink:var(--wtds-ink);
  --wtds-button-standard-stroke:var(--wtds-outline-soft);
  --wtds-button-standard-secondary-bg:transparent;
  --wtds-button-standard-secondary-ink:var(--wtds-ink);
  --wtds-button-standard-danger-bg:color-mix(in srgb,#e10e0e 18%,var(--wtds-surface-2));
  --wtds-button-standard-danger-ink:#ff8c8c;
  --wtds-button-standard-danger-stroke:color-mix(in srgb,#f89090 46%,transparent);
}


/* 7.7.87 · Typography hierarchy — visual proportions restored from the earlier Theme language.
 * Keep the current WTDS size scale and font families; only restore meaningful weight contrast. */
:root {
  --wtds-fw-body: 400;
  --wtds-fw-medium: 500;
  --wtds-fw-ui: 500;
  --wtds-fw-heading: 600;
  --wtds-fw-emphasis: 600;
  --wtds-fw-strong-max: 700;
  --wtds-fw-semibold: 600;
  --wtds-fw-bold: 700;
  --wtds-fw-extrabold: 800;
  --wtds-fw-black: 800;
}