/*
 * Peptide Partners WordPress Continuity 0.4.1: Next token mirror.
 *
 * Mirrors the storefront polish tokens (app/globals.css, B1) so WordPress
 * account pages use the same colours, button spec and focus ring as Next.
 * It loads after tokens.css and only adds or re-points custom properties;
 * it has no selectors other than :root. Rolling back is removing this file's
 * enqueue (or re-enqueueing 0.4.0), which restores tokens.css values.
 *
 * Palette: the softer ink/mist/lab-teal system (owner direction
 * 2026-11-06), the same values as the Next tokens. On account pages it
 * re-points the tokens.css neutrals to the ink scale; brand purple stays
 * --pp-color-primary and is used only through the button tokens below.
 *
 * CloudFront does not vary plugin assets by query string, so the version is
 * in the file name.
 */

:root {
  /* Ink neutrals (Next: ink-*), re-pointing the tokens.css neutrals. */
  --pp-color-ink-900: #15131a;
  --pp-color-ink-800: #2a2731;
  --pp-color-ink-600: #55525e;
  --pp-color-ink-500: #77737f;
  --pp-color-ink-300: #d9d7de;
  --pp-color-ink-200: #e9e8ed;
  --pp-color-ink-100: #f4f4f6;
  --pp-color-ink-50: #fbfbfc;
  --pp-color-background: #fbfbfc;
  --pp-color-foreground: #15131a;
  --pp-color-surface-soft: #fbfbfc;
  --pp-color-surface-muted: #f4f4f6;
  --pp-color-border: #e9e8ed;
  --pp-color-border-strong: #d9d7de;
  --pp-color-text-muted: #55525e;
  --pp-color-text-soft: #2a2731;

  /* Mist (banners, chips, quiet panels) and lilac (selected, focus glow). */
  --pp-color-mist: #f4f4f6;
  --pp-color-mist-border: #e9e8ed;
  --pp-color-primary-soft: #f3f0f7;
  --pp-color-selected: #f3f0f7;
  --pp-color-selected-border: #e4dcee;

  /* Lab teal: purity, batch and COA proof only. */
  --pp-color-evidence: #1d7466;
  --pp-color-evidence-soft: #e7f3f0;

  /* Surfaces and borders (Next: surface-*, border-*). */
  --pp-color-surface-recessed: #f6f6f8;
  --pp-color-surface-hover: #f4f4f6;
  --pp-color-surface-inverse: #17151e;
  --pp-color-border-subtle: #efeef2;
  --pp-color-dark: #0b0a0f;
  --pp-color-dark-surface: #121118;
  --pp-color-dark-border: #2a2731;

  /* Primary action (Next: primary, primary-hover). */
  --pp-color-primary-hover: #451f6b;

  /* Status (Next: status-*): text, soft fill and a solid dot. */
  --pp-color-success: #21634a;
  --pp-color-success-soft: #eaf5ef;
  --pp-color-success-dot: #2f9e6e;
  --pp-color-warning: #7a5520;
  --pp-color-warning-soft: #fff8e8;
  --pp-color-warning-dot: #d97a1e;
  --pp-color-danger: #b3261e;
  --pp-color-danger-soft: #fff4f6;
  --pp-color-danger-dot: #c2412d;
  --pp-color-info: #2a2731;
  --pp-color-info-soft: #f4f4f6;
  --pp-color-neutral-dot: #8a8693;

  /* Elevation: raised (cards, controls) and floating (menus, sheets). */
  --pp-shadow-raised: 0 1px 2px rgb(21 19 26 / 6%), 0 1px 1px rgb(21 19 26 / 3%);
  --pp-shadow-raised-hover: 0 10px 24px -10px rgb(21 19 26 / 18%), 0 1px 2px rgb(21 19 26 / 6%);
  --pp-shadow-floating: 0 18px 40px -14px rgb(21 19 26 / 24%), 0 2px 6px rgb(21 19 26 / 6%);
  --pp-shadow-panel: var(--pp-shadow-raised);
  --pp-shadow-control: var(--pp-shadow-raised);

  /*
   * Tangible buttons (Next Button). Primary: purple gradient, inner
   * highlight, tinted shadow. Secondary: ink on a white-to-mist gradient.
   * Both lift 1px on hover and press 0.5px down.
   */
  --pp-button-primary-bg: linear-gradient(180deg, #7240ab, #58298b);
  --pp-button-primary-bg-hover: linear-gradient(180deg, #7a47b5, #5e2c95);
  --pp-button-primary-border: #4a2177;
  --pp-button-primary-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 1px 2px rgb(40 16 70 / 28%), 0 6px 14px -4px rgb(92 43 142 / 45%);
  --pp-button-primary-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 22%), 0 2px 4px rgb(40 16 70 / 28%), 0 10px 22px -6px rgb(92 43 142 / 50%);
  --pp-button-primary-shadow-pressed: inset 0 2px 4px rgb(20 6 40 / 35%);
  --pp-button-secondary-bg: linear-gradient(180deg, #ffffff, #f6f6f8);
  --pp-button-secondary-bg-hover: linear-gradient(180deg, #ffffff, #f1f0f4);
  --pp-button-secondary-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgb(21 19 26 / 7%);
  --pp-button-secondary-shadow-hover: inset 0 1px 0 #ffffff, 0 6px 14px -6px rgb(21 19 26 / 18%), 0 1px 2px rgb(21 19 26 / 7%);
  --pp-button-secondary-shadow-pressed: inset 0 1px 3px rgb(21 19 26 / 14%);
  --pp-motion: 150ms ease-out;

  /* Radius (Next: rounded-inner, rounded-card, rounded-panel). */
  --pp-radius-inner: 16px;
  --pp-radius-card: 24px;
  --pp-radius-panel: 32px;

  /* Type (Next: text-label, text-meta, text-body). */
  --pp-text-label: 0.6875rem;
  --pp-tracking-label: 0.16em;
  --pp-text-meta: 0.75rem;
  --pp-text-body: 0.9375rem;

  /*
   * Button spec (Next components/ui/button.tsx): pill, sentence case,
   * 14px semibold, no tracking; 44px tall, 48px on forms.
   */
  --pp-button-height: 44px;
  --pp-button-height-form: 48px;
  --pp-button-font-size: 0.875rem;
  --pp-button-font-size-lg: 0.9375rem;
  --pp-button-font-weight: 600;
  --pp-button-tracking: 0;
  --pp-button-padding-inline: 1.25rem;

  /* Focus: 2px violet ring with a 2px offset; fields add the lilac glow. */
  --pp-color-focus: #7240ab;
  --pp-focus-outline: 2px solid #7240ab;
  --pp-focus-offset: 2px;
  --pp-focus-ring: 0 0 0 4px #e4dcee;
}