/*
 * Peptide Partners WordPress Continuity 0.4.3: account pages in dark mode.
 *
 * The site header plugin switches dark mode with html.dark and re-points the
 * base text and surface colours. The 0.4.1 softer palette added tokens that
 * only had light values (the ink accent, the white-to-mist secondary button,
 * mist, lilac, status fills), so in dark mode buttons were white with light
 * text and icons and kickers were dark on dark. This file gives those tokens
 * dark values, using the header's dark palette (#0b0a0f / #121118 / #2a2731).
 * It declares custom properties (and one icon filter), scoped to html.dark
 * on account pages.
 */

html.dark body.ppv2-account-surface,
html.dark body.ppv2-account-surface .woocommerce {
  /* Ink scale, inverted (used directly by controls such as the eye toggle). */
  --pp-color-ink-900: #f4f3f7;
  --pp-color-ink-800: #dedbe5;
  --pp-color-ink-600: #b3afbd;
  --pp-color-ink-500: #8f8a9a;
  --pp-color-ink-300: #3a3545;
  --pp-color-ink-200: #2a2731;
  --pp-color-ink-100: #1a1820;
  --pp-color-ink-50: #121118;

  /* Accent: 0.4.1 points it at ink-800 for light mode; light ink here. */
  --pp-color-primary: #dedbe5;
  --pp-color-primary-deep: #f4f3f7;
  --pp-color-primary-soft: #1f1c27;

  /* Mist, lilac and quiet surfaces. */
  --pp-color-mist: #1a1820;
  --pp-color-mist-border: #2a2731;
  --pp-color-selected: #221e2b;
  --pp-color-selected-border: #3a3446;
  --pp-color-surface-recessed: #1a1820;
  --pp-color-surface-hover: #1d1b24;
  --pp-color-border-subtle: #22202a;

  /* Status text and fills; the dots keep their colours. */
  --pp-color-success: #7fd1a8;
  --pp-color-success-soft: #12241c;
  --pp-color-warning: #f0b768;
  --pp-color-warning-soft: #2a2010;
  --pp-color-danger: #f08a7e;
  --pp-color-danger-soft: #2a1416;
  --pp-color-info: #dedbe5;
  --pp-color-info-soft: #1a1820;

  /* Secondary buttons: a raised dark pill with a faint top highlight. */
  --pp-button-secondary-bg: linear-gradient(180deg, #26232e, #1b1922);
  --pp-button-secondary-bg-hover: linear-gradient(180deg, #2d2a36, #201e28);
  --pp-button-secondary-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 1px 2px rgb(0 0 0 / 45%);
  --pp-button-secondary-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 9%), 0 6px 14px -6px rgb(0 0 0 / 65%), 0 1px 2px rgb(0 0 0 / 45%);
  --pp-button-secondary-shadow-pressed: inset 0 1px 3px rgb(0 0 0 / 55%);

  /* Elevation reads as shadow on black, not grey haze. */
  --pp-shadow-raised: 0 1px 2px rgb(0 0 0 / 40%);
  --pp-shadow-raised-hover: 0 10px 24px -10px rgb(0 0 0 / 60%), 0 1px 2px rgb(0 0 0 / 40%);
  --pp-shadow-floating: 0 18px 40px -14px rgb(0 0 0 / 70%), 0 2px 6px rgb(0 0 0 / 40%);

  /* Focus: the lighter violet with a soft glow, as in the header. */
  --pp-color-focus: #b18be4;
  --pp-focus-outline: 2px solid #b18be4;
  --pp-focus-ring: 0 0 0 4px rgb(177 139 228 / 30%);
}

/* Elementor's My Account widget reads its own link variables. */
html.dark body.ppv2-account-surface .elementor-element.elementor-widget-woocommerce-my-account {
  --links-normal-color: #f4f3f7;
  --links-hover-color: #dedbe5;
  /* Table headings: the widget's purple title colour is too dark on black. */
  --tables-title-color: #b3afbd;
}

/* WooCommerce draws the eye icon as a dark SVG background; flip it to light. */
html.dark body.ppv2-account-surface .woocommerce .password-input button.show-password-input::before {
  filter: invert(0.92);
}