/*
 * Duchi Treats — tokens that theme.json can't express.
 * Colors, type, spacing, and layout live in theme.json (--wp--preset--*).
 * Here: radius scale, pink-tinted shadows, motion, z-index, semantic aliases,
 * and WooCommerce variable aliasing. (Design system 01 + 08 §1.)
 */

:root {
  /* Radius (01 §4) */
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation — pink-tinted (01 §5) */
  --shadow-sm: 0 10px 24px -14px rgba(212, 62, 114, .30);
  --shadow-md: 0 18px 40px -18px rgba(212, 62, 114, .35);
  --shadow-lg: 0 30px 60px -24px rgba(212, 62, 114, .40);

  /* Motion (01 §6) */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
  --float: 4s ease-in-out infinite;

  /* Z-index scale (01 §8) */
  --z-base: 0;
  --z-blob: 1;
  --z-raised: 2;
  --z-tag: 3;
  --z-nav: 50;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;

  /* Breakpoints (01 §7) — for reference in JS / container queries */
  --bp-sm: 680px;
  --bp-md: 920px;
  --bp-lg: 1180px;

  /* Semantic aliases (01 §1.4) — components reference these, not raw presets */
  --bg-page: var(--wp--preset--color--cream);
  --bg-surface: var(--wp--preset--color--white);
  --bg-tint: var(--wp--preset--color--blush-soft);
  --bg-brand: var(--wp--preset--color--rose);
  --text-strong: var(--wp--preset--color--ink);
  --text-body: var(--wp--preset--color--grey);
  --text-muted: var(--wp--preset--color--grey-soft);
  --text-on-brand: var(--wp--preset--color--white);
  --action: var(--wp--preset--color--rose);
  --action-hover: var(--wp--preset--color--rose-deep);
  --border: var(--wp--preset--color--line);
  --price: var(--wp--preset--color--rose-deep);

  /* Soft focus halos for form fields (no harsh outline) */
  --ring-soft: rgba(232, 85, 134, 0.22);
  --ring-error: rgba(224, 68, 91, 0.22);

  /* Status (01 §1.3) */
  --s-success: #2FB774;
  --s-error: #E0445B;
  --s-warning: #E7922E;
  --s-info: #7C5CFF;
  --s-sale: #FF2E93;

  /* Alias WooCommerce's own vars to brand, to catch plugin defaults (08 §1) */
  --wc-primary: var(--wp--preset--color--rose);
  --wc-primary-text: #fff;
  --wc-secondary: var(--wp--preset--color--blush-soft);
  --wc-highlight: var(--wp--preset--color--rose-deep);
  --wc-content-bg: var(--wp--preset--color--white);
  --wc-form-border-color: var(--wp--preset--color--line);
}

/* Global motion kill-switch (07 §5) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus everywhere (07 §3) */
:focus-visible {
  outline: 3px solid var(--wp--preset--color--magenta);
  outline-offset: 2px;
}