/*
 * Wapu Theme Design System · Foundations 2.0
 *
 * Identity input: Playground/PGDS when available.
 * 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 {
  /* ── Identity bridge: Playground chooses, WTDS interprets. ─────────── */
  --wtds-brand-primary: var(--pg-style-primary, var(--wtds-accent));
  --wtds-brand-on-primary: var(--pg-style-primary-text, var(--wtds-accent-ink));
  --wtds-brand-secondary: var(--pg-style-secondary, var(--wtds-surface-2));
  --wtds-brand-on-secondary: var(--pg-style-secondary-text, var(--wtds-ink));

  --wtds-font-display-fallback: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --wtds-font-text-fallback: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --wtds-font-help-fallback: var(--wtds-font-text-fallback);
  --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));

  /* ── 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 8px 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-control-min: 44px;

  /* Playground owns button personality. WTDS owns component behavior. */
  --wtds-button-radius: var(--pg-button-radius, var(--wtds-r-sm));

  /* ── 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(--pg-state-focus, var(--wtds-primary));

  /* ── 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-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. ───────────────────────────────── */
  --wtds-state-hover-bg: var(--pg-state-hover-bg, var(--wtds-hover-soft));
  --wtds-state-hover-border: var(--pg-state-hover-border, var(--wtds-outline-soft));
  --wtds-state-active-bg: var(--pg-state-active-bg, var(--wtds-fill-3));
  --wtds-state-active-border: var(--pg-state-active-border, var(--wtds-outline));
  --wtds-state-selected-bg: var(--pg-state-selected-bg, var(--wtds-primary-soft));
  --wtds-state-selected-text: var(--pg-state-selected-text, var(--wtds-on-surface));
  --wtds-state-selected-border: var(--pg-state-selected-border, var(--wtds-primary));
  --wtds-state-disabled-opacity: var(--pg-state-disabled-opacity, var(--md-ref-state-disabled-opacity));

  /* ── Material reference aliases: engineering only. ───────────────── */
  --wtds-motion-fast: var(--md-ref-motion-duration-fast);
  --wtds-motion-normal: var(--md-ref-motion-duration-short);
  --wtds-motion-slow: var(--md-ref-motion-duration-medium);
  --wtds-motion-slower: var(--md-ref-motion-duration-long);
  --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-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 {
    --wtds-control-min: var(--wtds-touch-target, 48px);
  }
}

@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; }