/*
 * 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.
 */
:root {
  /* ── Storefront action identity: WTDS owns the primary action seed. ── */
  --wtds-brand-primary: #2D68F8;
  --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);
  /* Playground may provide storefront typography only. Action color and geometry remain WTDS-owned. */
  --wtds-font-display: var(--pg-style-heading, var(--wtds-font-display-fallback));
  --wtds-font-text: var(--pg-style-body, var(--wtds-font-text-fallback));
  --wtds-font-help: var(--pg-style-help, var(--wtds-font-help-fallback));
  --wtds-font-system-owned: "Inter", 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: var(--wtds-r-md);
  --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: var(--wtds-primary);
  --wtds-accent-soft: var(--wtds-primary-soft);
  --wtds-accent-border: color-mix(in oklch, var(--wtds-primary) 28%, transparent);
  --wtds-accent-ink: var(--wtds-primary-ink);
  --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 is role-based: the primary seed stays branded while surfaces,
 * content and derived containers automatically resolve against dark WTDS paint. */
.wapu-theme-dark {
  --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; }


/* 7.7.41 · Theme-owned typography zones.
 * Playground typography is intentionally blocked from transactional/system UI. */
:where(body.woocommerce-account, body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-pay-page) {
  --wtds-font-display: var(--wtds-font-system-owned);
  --wtds-font-text: var(--wtds-font-system-owned);
  --wtds-font-help: var(--wtds-font-system-owned);
  font-family: var(--wtds-font-system-owned);
}

: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
) {
  --wtds-font-display: var(--wtds-font-system-owned);
  --wtds-font-text: var(--wtds-font-system-owned);
  --wtds-font-help: var(--wtds-font-system-owned);
  font-family: var(--wtds-font-system-owned);
}

/* 7.7.79 · Canonical text-button tokens · Figma 6636:4226 */
:root{
  --wtds-button-standard-radius:.5rem;
  --wtds-button-standard-font-size:.75rem;
  --wtds-button-standard-font-weight:500;
  --wtds-button-standard-line-height:1;
  --wtds-button-standard-padding:.5rem;
  --wtds-button-standard-min-height:2rem;
  --wtds-button-standard-small-height:2.125rem;
  --wtds-button-standard-primary-bg:#2d68f8;
  --wtds-button-standard-primary-ink:#fff;
  --wtds-button-standard-secondary-bg:#e1e8ff;
  --wtds-button-standard-secondary-ink:#2d68f8;
  --wtds-button-standard-inactive-bg:#f9fafb;
  --wtds-button-standard-inactive-ink:#121212;
  --wtds-button-standard-stroke:#e5e7eb;
  --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-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:color-mix(in oklch,#2d68f8 26%,var(--wtds-surface-2));
  --wtds-button-standard-secondary-ink:#8fabff;
  --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;
}