/**
 * MPP design tokens — single source of truth for first-party colors.
 *
 * Keep in sync with includes/design/class-palette.php.
 * Enqueued via Assets (mp-palette-css) + @import in global.css.
 *
 * --mp-token-*: raw hex (safe for Tailwind @theme to reference)
 * --mp-color-*: semantic aliases used in plain CSS / PHP Palette::cssVar()
 * --mp-primary-*: brand scale
 */

:root {
  /* ——— Raw tokens (Tailwind @theme references these) ——— */
  --mp-token-brand: #736dff;
  --mp-token-brand-lighter: #a5a0ff;
  --mp-token-brand-soft: #eeecfc;
  --mp-token-brand-strong: #6c5ce7;
  --mp-token-surface: #f1f1f5;
  --mp-token-surface-alt: #f6f7f7;
  --mp-token-surface-hover: #eef0f1;
  --mp-token-border: #e2e8f0;
  --mp-token-border-subtle: #dcdcde;
  --mp-token-border-muted: #c3c4c7;
  --mp-token-border-dashed: #cccccc;
  --mp-token-border-soft: #dddddd;
  --mp-token-ink: #1e1d24;
  --mp-token-ink-muted: #6b7280;
  --mp-token-ink-subtle: #646970;
  --mp-token-neutral-900: #111111;
  --mp-token-white: #ffffff;
  --mp-token-black: #000000;
  --mp-token-disabled: #a7aaad;
  --mp-token-gray-100: #f0f0f1;
  --mp-token-gray-200: #e5e7eb;
  --mp-token-warning: #ffcc00;
  --mp-token-danger: #ff4d4f;
  --mp-token-success: #15803d;
  --mp-token-warning-surface: #fef3c7;
  --mp-token-warning-ink: #d97706;
  --mp-token-warning-ink-strong: #b45309;
  --mp-token-danger-wp: #d63638;
  --mp-token-danger-ink: #b32d2e;
  --mp-token-danger-strong: #b91c1c;
  --mp-token-focus: #3b82f6;
  --mp-token-admin-bar-hover: #00b9eb;
  --mp-token-success-feedback: #008000;
  --mp-token-wp-accent: #2271b1;
  --mp-token-wp-accent-alt: #007cba;
  --mp-token-wp-accent-hover: #0071a1;
  --mp-token-wp-ink: #1d2327;
  --mp-token-wp-dark-border: #555d66;
  --mp-token-wp-dark-surface: #2c3338;
  --mp-token-wp-dark-btn: #3c434a;
  --mp-token-wp-dark-btn-hover: #50575e;
  --mp-token-wp-dark-text: #f0f0f1;
  --mp-token-toast-bg: #334155;
  --mp-token-inline-cta: #967550;
  --mp-token-star-rating: #ffb800;
  --mp-token-logo-mark: #e6e7e8;
  --mp-token-faq-accent: #8b0dbb;
  --mp-token-toc-ink: #1c274c;
  --mp-token-irp-ink: #1e1e1e;
  --mp-token-irp-border: #e0e0e0;
  --mp-token-grw-surface: #fafafa;
  --mp-token-grw-muted: #666666;
  --mp-token-grw-ink: #333333;
  --mp-token-post-status-pending-bg: #ffe8ab40;
  --mp-token-post-status-pending-ink: #f08080;
  --mp-token-surface-f9: #f9f9f9;
  --mp-token-picker-fallback: #000000;
  --mp-token-picker-fallback-alt: #333333;
  --mp-token-toast-info: #7c3aed;
  --mp-token-wp-success: #00a32a;
  --mp-token-ink-admin: #50575e;
  --mp-token-ink-faint: #787c82;
  --mp-token-wp-accent-surface: #f0f6fc;
  --mp-token-wp-notice-info-surface: #e8f4fa;
  --mp-token-wp-notice-success: #46b450;
  --mp-token-wp-notice-success-surface: #eafbe7;
  --mp-token-wp-notice-warning-surface: #fff8e5;
  --mp-token-wp-notice-error: #dc3232;
  --mp-token-wp-notice-error-surface: #faeaea;
  --mp-token-faq-admin-error-bg: #fcf0f1;
  --mp-token-faq-admin-success-bg: #edfaef;
  --mp-token-faq-admin-success-ink: #1e6e2e;
  --mp-token-grs-success-bg: #d1f0d7;
  --mp-token-grs-success-ink: #0a5c1a;
  --mp-token-surface-fafc: #f9fafb;
  --mp-token-surface-f3: #f3f4f6;
  --mp-token-disclaimer-bg: #f8f9fa;
  --mp-token-disclaimer-ink: #4b5563;
  --mp-token-disclaimer-title: #1f2937;
  --mp-token-sources-accent: #a68966;
  --mp-token-sources-subtitle: #707b8c;
  --mp-token-sources-link: #2b6cb0;
  --mp-token-scroll-track: rgba(85, 85, 85, 0.1);
  --mp-token-scroll-thumb: rgba(85, 85, 85, 0.6);
  --mp-token-overlay-scrim-40: rgba(0, 0, 0, 0.4);
  --mp-token-overlay-scrim-60: rgba(0, 0, 0, 0.6);
  --mp-token-overlay-border-15: rgba(0, 0, 0, 0.15);
  --mp-token-shadow-05: rgba(0, 0, 0, 0.05);
  --mp-token-shadow-04: rgba(0, 0, 0, 0.04);
  --mp-token-shadow-15: rgba(0, 0, 0, 0.15);

  --mp-token-primary-50: #f5f4ff;
  --mp-token-primary-100: #e8e6ff;
  --mp-token-primary-200: #d1ceff;
  --mp-token-primary-500: #7773c7;
  --mp-token-primary-600: #5d57e6;
  --mp-token-primary-700: #4a44cc;
  --mp-token-primary-800: #3d37b3;
  --mp-token-primary-900: #2f2a99;
  --mp-token-primary-950: #1f1a66;

  /* ——— Semantic aliases (plain CSS / legacy) ——— */
  --mp-color-light: var(--mp-token-brand);
  --mp-color-lighter: var(--mp-token-brand-lighter);
  --mp-color-brand: var(--mp-token-brand);
  --mp-color-brand-soft: var(--mp-token-brand-soft);
  --mp-color-brand-strong: var(--mp-token-brand-strong);
  --mp-color-white: var(--mp-token-white);
  --mp-color-black: var(--mp-token-black);
  --mp-color-surface: var(--mp-token-surface);
  --mp-color-surface-alt: var(--mp-token-surface-alt);
  --mp-color-surface-hover: var(--mp-token-surface-hover);
  --mp-color-border: var(--mp-token-border);
  --mp-color-border-subtle: var(--mp-token-border-subtle);
  --mp-color-border-muted: var(--mp-token-border-muted);
  --mp-color-border-dashed: var(--mp-token-border-dashed);
  --mp-color-border-soft: var(--mp-token-border-soft);
  --mp-color-ink: var(--mp-token-ink);
  --mp-color-ink-muted: var(--mp-token-ink-muted);
  --mp-color-ink-subtle: var(--mp-token-ink-subtle);
  --mp-color-neutral-900: var(--mp-token-neutral-900);
  --mp-color-placeholder: var(--mp-token-ink-muted);
  --mp-color-disabled: var(--mp-token-disabled);
  --mp-color-gray-100: var(--mp-token-gray-100);
  --mp-color-gray-200: var(--mp-token-gray-200);
  --mp-color-warning: var(--mp-token-warning);
  --mp-color-danger: var(--mp-token-danger);
  --mp-color-error: var(--mp-color-danger);
  --mp-color-success: var(--mp-token-success);
  --mp-color-warning-surface: var(--mp-token-warning-surface);
  --mp-color-warning-ink: var(--mp-token-warning-ink);
  --mp-color-warning-ink-strong: var(--mp-token-warning-ink-strong);
  --mp-color-danger-wp: var(--mp-token-danger-wp);
  --mp-color-danger-ink: var(--mp-token-danger-ink);
  --mp-color-danger-strong: var(--mp-token-danger-strong);
  --mp-color-focus: var(--mp-token-focus);
  --mp-color-admin-bar-hover: var(--mp-token-admin-bar-hover);
  --mp-color-success-feedback: var(--mp-token-success-feedback);
  --mp-color-wp-accent: var(--mp-token-wp-accent);
  --mp-color-wp-accent-alt: var(--mp-token-wp-accent-alt);
  --mp-color-wp-accent-hover: var(--mp-token-wp-accent-hover);
  --mp-color-wp-ink: var(--mp-token-wp-ink);
  --mp-color-wp-dark-border: var(--mp-token-wp-dark-border);
  --mp-color-wp-dark-surface: var(--mp-token-wp-dark-surface);
  --mp-color-wp-dark-btn: var(--mp-token-wp-dark-btn);
  --mp-color-wp-dark-btn-hover: var(--mp-token-wp-dark-btn-hover);
  --mp-color-wp-dark-text: var(--mp-token-wp-dark-text);
  --mp-color-toast-bg: var(--mp-token-toast-bg);
  --mp-color-toast-success: var(--mp-token-success);
  --mp-color-toast-error: var(--mp-token-danger-strong);
  --mp-color-toast-warning: var(--mp-token-warning-ink-strong);
  --mp-color-toast-info: var(--mp-token-toast-info);
  --mp-color-wp-success: var(--mp-token-wp-success);
  --mp-color-ink-admin: var(--mp-token-ink-admin);
  --mp-color-ink-faint: var(--mp-token-ink-faint);
  --mp-color-wp-accent-surface: var(--mp-token-wp-accent-surface);
  --mp-color-wp-notice-info-surface: var(--mp-token-wp-notice-info-surface);
  --mp-color-wp-notice-success: var(--mp-token-wp-notice-success);
  --mp-color-wp-notice-success-surface: var(--mp-token-wp-notice-success-surface);
  --mp-color-wp-notice-warning-surface: var(--mp-token-wp-notice-warning-surface);
  --mp-color-wp-notice-error: var(--mp-token-wp-notice-error);
  --mp-color-wp-notice-error-surface: var(--mp-token-wp-notice-error-surface);
  --mp-color-faq-admin-error-bg: var(--mp-token-faq-admin-error-bg);
  --mp-color-faq-admin-success-bg: var(--mp-token-faq-admin-success-bg);
  --mp-color-faq-admin-success-ink: var(--mp-token-faq-admin-success-ink);
  --mp-color-grs-success-bg: var(--mp-token-grs-success-bg);
  --mp-color-grs-success-ink: var(--mp-token-grs-success-ink);
  --mp-color-surface-fafc: var(--mp-token-surface-fafc);
  --mp-color-surface-f3: var(--mp-token-surface-f3);
  --mp-color-disclaimer-bg: var(--mp-token-disclaimer-bg);
  --mp-color-disclaimer-ink: var(--mp-token-disclaimer-ink);
  --mp-color-disclaimer-title: var(--mp-token-disclaimer-title);
  --mp-color-sources-accent: var(--mp-token-sources-accent);
  --mp-color-sources-subtitle: var(--mp-token-sources-subtitle);
  --mp-color-sources-link: var(--mp-token-sources-link);
  --mp-color-shadow-08: rgba(0, 0, 0, 0.08);
  --mp-color-shadow-18: rgba(0, 0, 0, 0.18);
  --mp-color-shadow-20: rgba(0, 0, 0, 0.2);
  --mp-color-shadow-45: rgba(0, 0, 0, 0.45);
  --mp-color-shadow-05: var(--mp-token-shadow-05);
  --mp-color-shadow-04: var(--mp-token-shadow-04);
  --mp-color-shadow-15: var(--mp-token-shadow-15);
  --mp-color-overlay-scrim-40: var(--mp-token-overlay-scrim-40);
  --mp-color-overlay-scrim-60: var(--mp-token-overlay-scrim-60);
  --mp-color-overlay-border-15: var(--mp-token-overlay-border-15);
  --mp-color-scroll-track: var(--mp-token-scroll-track);
  --mp-color-scroll-thumb: var(--mp-token-scroll-thumb);
  --mp-color-shadow-white-06: rgba(255, 255, 255, 0.06);
  --mp-color-icon-empty-bg: color-mix(in srgb, currentColor 12%, transparent);
  --mp-color-icon-empty-border: color-mix(in srgb, currentColor 28%, transparent);
  --mp-color-icon-empty-bg-soft: color-mix(in srgb, currentColor 10%, transparent);
  --mp-color-icon-empty-border-soft: color-mix(in srgb, currentColor 22%, transparent);
  --mp-color-warning-label: color-mix(
    in srgb,
    var(--mp-color-warning) 72%,
    var(--mp-color-wp-ink)
  );
  --mp-color-inline-cta-default: var(--mp-token-inline-cta);
  --mp-color-star-rating-default: var(--mp-token-star-rating);
  --mp-color-picker-fallback: var(--mp-token-picker-fallback);
  --mp-color-picker-fallback-alt: var(--mp-token-picker-fallback-alt);
  --mp-color-logo-mark: var(--mp-token-logo-mark);
  --mp-color-faq-accent: var(--mp-token-faq-accent);
  --mp-color-toc-ink: var(--mp-token-toc-ink);
  --mp-color-irp-ink: var(--mp-token-irp-ink);
  --mp-color-irp-border: var(--mp-token-irp-border);
  --mp-color-grw-surface: var(--mp-token-grw-surface);
  --mp-color-grw-muted: var(--mp-token-grw-muted);
  --mp-color-grw-ink: var(--mp-token-grw-ink);
  --mp-color-post-status-pending-bg: var(--mp-token-post-status-pending-bg);
  --mp-color-post-status-pending-ink: var(--mp-token-post-status-pending-ink);
  --mp-color-surface-f9: var(--mp-token-surface-f9);

  --mp-primary-50: var(--mp-token-primary-50);
  --mp-primary-100: var(--mp-token-primary-100);
  --mp-primary-200: var(--mp-token-primary-200);
  --mp-primary-300: var(--mp-color-lighter);
  --mp-primary-400: var(--mp-color-light);
  --mp-primary-500: var(--mp-token-primary-500);
  --mp-primary-600: var(--mp-token-primary-600);
  --mp-primary-700: var(--mp-token-primary-700);
  --mp-primary-800: var(--mp-token-primary-800);
  --mp-primary-900: var(--mp-token-primary-900);
  --mp-primary-950: var(--mp-token-primary-950);

  --mp-border-radius-base: 0.125rem;
  --mp-border-radius: var(--mp-border-radius-base);
}