/*
 * ImageVault Pro design tokens.
 * The only file in the project allowed to contain literal colour values.
 * Everything is scoped to .ivp-app so nothing leaks into the host theme.
 */

.ivp-app {
	color-scheme: light;

	/* Palette */
	--ivp-violet: #6D28D9;
	--ivp-indigo: #4F46E5;
	--ivp-cyan: #06B6D4;
	--ivp-teal: #14B8A6;
	--ivp-pink: #EC4899;
	--ivp-rose: #F43F5E;
	--ivp-amber: #F59E0B;
	--ivp-lime: #84CC16;

	/* Deeper stops (dark-mode gradients) and text-safe inks */
	--ivp-violet-deep: #5B21B6;
	--ivp-indigo-deep: #4338CA;
	--ivp-cyan-deep: #0891B2;
	--ivp-teal-deep: #0F766E;
	--ivp-pink-deep: #BE185D;
	--ivp-rose-deep: #BE123C;
	--ivp-amber-deep: #D97706;
	--ivp-lime-deep: #4D7C0F;
	--ivp-amber-ink: #B45309;
	--ivp-cyan-ink: #0E7490;

	/* Light tints (dark-mode foregrounds) */
	--ivp-violet-light: #A78BFA;
	--ivp-violet-lighter: #C4B5FD;
	--ivp-indigo-light: #A5B4FC;
	--ivp-rose-light: #FB7185;

	--ivp-white: #FFFFFF;
	--ivp-black: #000000;

	/* Neutral ramp, faintly violet so greys sit with the palette */
	--ivp-n-50: #F8F8FC;
	--ivp-n-100: #F1F1F7;
	--ivp-n-200: #E3E3EE;
	--ivp-n-300: #CBCBDB;
	--ivp-n-400: #A1A1B7;
	--ivp-n-450: #9090A8;
	--ivp-n-500: #6B6B85;
	--ivp-n-600: #575771;
	--ivp-n-700: #3F3F57;
	--ivp-n-800: #2A2A3D;
	--ivp-n-900: #1B1B2A;
	--ivp-n-950: #0F0F1A;

	/* Semantic */
	--ivp-bg: var(--ivp-n-50);
	--ivp-surface: var(--ivp-white);
	--ivp-surface-2: var(--ivp-n-100);
	--ivp-surface-3: var(--ivp-n-200);
	--ivp-border: var(--ivp-n-200);
	--ivp-border-strong: var(--ivp-n-300);
	--ivp-text: var(--ivp-n-900);
	--ivp-text-muted: var(--ivp-n-600);
	--ivp-text-subtle: var(--ivp-n-500);
	--ivp-link: var(--ivp-indigo);
	--ivp-primary: var(--ivp-violet);
	--ivp-primary-hover: var(--ivp-violet-deep);
	--ivp-on-primary: var(--ivp-white);
	--ivp-success: var(--ivp-teal-deep);
	--ivp-warning: var(--ivp-amber-ink);
	--ivp-danger: var(--ivp-rose-deep);
	--ivp-info: var(--ivp-cyan-ink);
	--ivp-on-danger: var(--ivp-white);
	--ivp-focus: var(--ivp-primary);

	--ivp-primary-soft: rgba(109, 40, 217, 0.10);
	--ivp-primary-ring: rgba(109, 40, 217, 0.28);
	--ivp-success-soft: rgba(20, 184, 166, 0.13);
	--ivp-warning-soft: rgba(245, 158, 11, 0.15);
	--ivp-danger-soft: rgba(244, 63, 94, 0.12);
	--ivp-danger-ring: rgba(244, 63, 94, 0.26);
	--ivp-info-soft: rgba(6, 182, 212, 0.13);

	--ivp-overlay: rgba(15, 15, 26, 0.45);
	--ivp-glass: rgba(255, 255, 255, 0.74);
	--ivp-scrim: linear-gradient(to top, rgba(15, 15, 26, 0.82) 0%, rgba(15, 15, 26, 0.30) 48%, rgba(15, 15, 26, 0) 78%);
	--ivp-on-image: var(--ivp-white);
	--ivp-tile-action-bg: rgba(15, 15, 26, 0.64);
	--ivp-tooltip-bg: var(--ivp-n-900);
	--ivp-tooltip-text: var(--ivp-n-50);
	--ivp-skeleton-base: var(--ivp-n-100);
	--ivp-skeleton-shine: rgba(255, 255, 255, 0.80);
	--ivp-shadow-color: rgba(27, 27, 42, 0.07);
	--ivp-shadow-color-strong: rgba(27, 27, 42, 0.14);
	--ivp-glow-color: rgba(109, 40, 217, 0.45);
	--ivp-glow-edge: rgba(109, 40, 217, 0.12);
	--ivp-il-shadow: rgba(27, 27, 42, 0.09);
	--ivp-il-on-photo: rgba(255, 255, 255, 0.92);

	/* Gradient stops — dark mode swaps these, the gradients follow */
	--ivp-aurora-1: var(--ivp-violet);
	--ivp-aurora-2: var(--ivp-cyan);
	--ivp-aurora-3: var(--ivp-teal);
	--ivp-sunset-1: var(--ivp-amber);
	--ivp-sunset-2: var(--ivp-rose);
	--ivp-sunset-3: var(--ivp-pink);
	--ivp-ocean-1: var(--ivp-indigo);
	--ivp-ocean-2: var(--ivp-cyan);
	--ivp-candy-1: var(--ivp-pink);
	--ivp-candy-2: var(--ivp-violet);
	--ivp-forest-1: var(--ivp-lime);
	--ivp-forest-2: var(--ivp-teal);
	--ivp-primary-1: var(--ivp-violet);
	--ivp-primary-2: var(--ivp-indigo);
	--ivp-primary-3: var(--ivp-pink-deep);
	--ivp-mesh-1: rgba(109, 40, 217, 0.18);
	--ivp-mesh-2: rgba(6, 182, 212, 0.16);
	--ivp-mesh-3: rgba(236, 72, 153, 0.14);
	--ivp-mesh-4: rgba(245, 158, 11, 0.13);
	--ivp-text-grad-1: var(--ivp-violet);
	--ivp-text-grad-2: var(--ivp-indigo);
	--ivp-text-grad-3: var(--ivp-pink-deep);

	/* Gradients */
	--ivp-grad-aurora: linear-gradient(135deg, var(--ivp-aurora-1) 0%, var(--ivp-aurora-2) 55%, var(--ivp-aurora-3) 100%);
	--ivp-grad-sunset: linear-gradient(135deg, var(--ivp-sunset-1) 0%, var(--ivp-sunset-2) 55%, var(--ivp-sunset-3) 100%);
	--ivp-grad-ocean: linear-gradient(135deg, var(--ivp-ocean-1) 0%, var(--ivp-ocean-2) 100%);
	--ivp-grad-candy: linear-gradient(135deg, var(--ivp-candy-1) 0%, var(--ivp-candy-2) 100%);
	--ivp-grad-forest: linear-gradient(135deg, var(--ivp-forest-1) 0%, var(--ivp-forest-2) 100%);
	--ivp-grad-mesh:
		radial-gradient(at 8% 12%, var(--ivp-mesh-1) 0, transparent 52%),
		radial-gradient(at 92% 6%, var(--ivp-mesh-2) 0, transparent 50%),
		radial-gradient(at 90% 94%, var(--ivp-mesh-3) 0, transparent 55%),
		radial-gradient(at 4% 92%, var(--ivp-mesh-4) 0, transparent 50%);
	/* Button fill: every stop keeps white text above 4.5:1 */
	--ivp-grad-primary: linear-gradient(135deg, var(--ivp-primary-1) 0%, var(--ivp-primary-2) 55%, var(--ivp-primary-3) 100%);
	/* Gradient text: stops stay readable on the page background in both themes */
	--ivp-grad-text: linear-gradient(120deg, var(--ivp-text-grad-1) 0%, var(--ivp-text-grad-2) 50%, var(--ivp-text-grad-3) 100%);
	/* Initials avatars: deep stops so white initials stay legible */
	--ivp-grad-avatar-0: linear-gradient(135deg, var(--ivp-violet-deep), var(--ivp-indigo));
	--ivp-grad-avatar-1: linear-gradient(135deg, var(--ivp-pink-deep), var(--ivp-rose-deep));
	--ivp-grad-avatar-2: linear-gradient(135deg, var(--ivp-teal-deep), var(--ivp-cyan-ink));
	--ivp-grad-avatar-3: linear-gradient(135deg, var(--ivp-indigo-deep), var(--ivp-cyan-ink));
	--ivp-grad-avatar-4: linear-gradient(135deg, var(--ivp-amber-ink), var(--ivp-rose-deep));

	/* Typography */
	--ivp-font-sans: "Inter", "InterVariable", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--ivp-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
	--ivp-fs-xs: 0.75rem;
	--ivp-fs-sm: 0.875rem;
	--ivp-fs-base: 1rem;
	--ivp-fs-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
	--ivp-fs-xl: clamp(1.125rem, 1.04rem + 0.4vw, 1.25rem);
	--ivp-fs-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
	--ivp-fs-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
	--ivp-fs-4xl: clamp(1.875rem, 1.45rem + 2.1vw, 2.75rem);
	--ivp-fs-5xl: clamp(2.25rem, 1.6rem + 3.25vw, 3.5rem);
	--ivp-lh-tight: 1.12;
	--ivp-lh-snug: 1.3;
	--ivp-lh: 1.6;
	--ivp-fw-regular: 400;
	--ivp-fw-medium: 500;
	--ivp-fw-semibold: 600;
	--ivp-fw-bold: 700;
	--ivp-fw-black: 800;
	--ivp-ls-tight: -0.02em;
	--ivp-ls-wide: 0.08em;

	/* Spacing — 4px grid */
	--ivp-sp-0: 0;
	--ivp-sp-1: 0.25rem;
	--ivp-sp-2: 0.5rem;
	--ivp-sp-3: 0.75rem;
	--ivp-sp-4: 1rem;
	--ivp-sp-5: 1.25rem;
	--ivp-sp-6: 1.5rem;
	--ivp-sp-7: 1.75rem;
	--ivp-sp-8: 2rem;
	--ivp-sp-10: 2.5rem;
	--ivp-sp-12: 3rem;
	--ivp-sp-14: 3.5rem;
	--ivp-sp-16: 4rem;
	--ivp-sp-20: 5rem;
	--ivp-sp-24: 6rem;

	/* Radii */
	--ivp-r-xs: 4px;
	--ivp-r-sm: 8px;
	--ivp-r-md: 12px;
	--ivp-r-lg: 16px;
	--ivp-r-xl: 24px;
	--ivp-r-2xl: 32px;
	--ivp-r-full: 999px;

	/* Shadows */
	--ivp-shadow-xs: 0 1px 2px var(--ivp-shadow-color);
	--ivp-shadow-sm: 0 1px 2px var(--ivp-shadow-color), 0 2px 8px var(--ivp-shadow-color);
	--ivp-shadow-md: 0 4px 10px -2px var(--ivp-shadow-color), 0 12px 28px -8px var(--ivp-shadow-color-strong);
	--ivp-shadow-lg: 0 12px 28px -8px var(--ivp-shadow-color-strong), 0 28px 64px -16px var(--ivp-shadow-color);
	--ivp-shadow-xl: 0 32px 80px -20px var(--ivp-shadow-color-strong), 0 8px 24px -8px var(--ivp-shadow-color);
	--ivp-shadow-glow: 0 10px 30px -6px var(--ivp-glow-color), 0 0 0 1px var(--ivp-glow-edge);
	--ivp-ring: 0 0 0 4px var(--ivp-primary-ring);

	/* Motion */
	--ivp-dur-fast: 150ms;
	--ivp-dur: 300ms;
	--ivp-dur-slow: 600ms;
	--ivp-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ivp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ivp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ivp-stagger-step: 60ms;

	/* Layers (above the WordPress admin bar at 99999) */
	--ivp-z-header: 40;
	--ivp-z-dropdown: 60;
	--ivp-z-modal: 100000;
	--ivp-z-toast: 100010;
	--ivp-z-loading: 100020;

	/* Layout */
	--ivp-container: 74rem;
	--ivp-container-narrow: 28rem;
	--ivp-header-h: 4rem;
	--ivp-tap: 2.75rem;
}

/* Dark: follow the system unless the member chose light. */
@media (prefers-color-scheme: dark) {
	:root:not([data-ivp-theme="light"]) .ivp-app {
		color-scheme: dark;

		--ivp-bg: var(--ivp-n-950);
		--ivp-surface: var(--ivp-n-900);
		--ivp-surface-2: var(--ivp-n-800);
		--ivp-surface-3: var(--ivp-n-700);
		--ivp-border: var(--ivp-n-800);
		--ivp-border-strong: var(--ivp-n-700);
		--ivp-text: var(--ivp-n-50);
		--ivp-text-muted: var(--ivp-n-400);
		--ivp-text-subtle: var(--ivp-n-450);
		--ivp-link: var(--ivp-indigo-light);
		--ivp-primary: var(--ivp-violet-light);
		--ivp-primary-hover: var(--ivp-violet-lighter);
		--ivp-on-primary: var(--ivp-n-950);
		--ivp-success: var(--ivp-teal);
		--ivp-warning: var(--ivp-amber);
		--ivp-danger: var(--ivp-rose-light);
		--ivp-info: var(--ivp-cyan);
		--ivp-on-danger: var(--ivp-n-950);
		--ivp-focus: var(--ivp-violet-light);

		--ivp-primary-soft: rgba(167, 139, 250, 0.16);
		--ivp-primary-ring: rgba(167, 139, 250, 0.38);
		--ivp-success-soft: rgba(20, 184, 166, 0.18);
		--ivp-warning-soft: rgba(245, 158, 11, 0.18);
		--ivp-danger-soft: rgba(251, 113, 133, 0.16);
		--ivp-danger-ring: rgba(251, 113, 133, 0.34);
		--ivp-info-soft: rgba(6, 182, 212, 0.18);

		--ivp-overlay: rgba(0, 0, 0, 0.60);
		--ivp-glass: rgba(15, 15, 26, 0.72);
		--ivp-tile-action-bg: rgba(0, 0, 0, 0.62);
		--ivp-tooltip-bg: var(--ivp-n-50);
		--ivp-tooltip-text: var(--ivp-n-900);
		--ivp-skeleton-base: var(--ivp-n-800);
		--ivp-skeleton-shine: rgba(255, 255, 255, 0.07);
		--ivp-shadow-color: rgba(0, 0, 0, 0.30);
		--ivp-shadow-color-strong: rgba(0, 0, 0, 0.50);
		--ivp-glow-color: rgba(167, 139, 250, 0.42);
		--ivp-glow-edge: rgba(167, 139, 250, 0.18);
		--ivp-il-shadow: rgba(0, 0, 0, 0.32);
		--ivp-il-on-photo: rgba(255, 255, 255, 0.90);

		--ivp-aurora-1: var(--ivp-violet-deep);
		--ivp-aurora-2: var(--ivp-cyan-deep);
		--ivp-aurora-3: var(--ivp-teal-deep);
		--ivp-sunset-1: var(--ivp-amber-deep);
		--ivp-sunset-2: var(--ivp-rose-deep);
		--ivp-sunset-3: var(--ivp-pink-deep);
		--ivp-ocean-1: var(--ivp-indigo-deep);
		--ivp-ocean-2: var(--ivp-cyan-deep);
		--ivp-candy-1: var(--ivp-pink-deep);
		--ivp-candy-2: var(--ivp-violet-deep);
		--ivp-forest-1: var(--ivp-lime-deep);
		--ivp-forest-2: var(--ivp-teal-deep);
		--ivp-primary-1: var(--ivp-violet-deep);
		--ivp-primary-2: var(--ivp-indigo-deep);
		--ivp-primary-3: var(--ivp-pink-deep);
		--ivp-mesh-1: rgba(109, 40, 217, 0.32);
		--ivp-mesh-2: rgba(6, 182, 212, 0.18);
		--ivp-mesh-3: rgba(236, 72, 153, 0.18);
		--ivp-mesh-4: rgba(20, 184, 166, 0.14);
		--ivp-text-grad-1: var(--ivp-violet-light);
		--ivp-text-grad-2: var(--ivp-indigo-light);
		--ivp-text-grad-3: var(--ivp-rose-light);
	}
}

/* Dark: chosen manually. Keep in sync with the block above. */
:root[data-ivp-theme="dark"] .ivp-app {
	color-scheme: dark;

	--ivp-bg: var(--ivp-n-950);
	--ivp-surface: var(--ivp-n-900);
	--ivp-surface-2: var(--ivp-n-800);
	--ivp-surface-3: var(--ivp-n-700);
	--ivp-border: var(--ivp-n-800);
	--ivp-border-strong: var(--ivp-n-700);
	--ivp-text: var(--ivp-n-50);
	--ivp-text-muted: var(--ivp-n-400);
	--ivp-text-subtle: var(--ivp-n-450);
	--ivp-link: var(--ivp-indigo-light);
	--ivp-primary: var(--ivp-violet-light);
	--ivp-primary-hover: var(--ivp-violet-lighter);
	--ivp-on-primary: var(--ivp-n-950);
	--ivp-success: var(--ivp-teal);
	--ivp-warning: var(--ivp-amber);
	--ivp-danger: var(--ivp-rose-light);
	--ivp-info: var(--ivp-cyan);
	--ivp-on-danger: var(--ivp-n-950);
	--ivp-focus: var(--ivp-violet-light);

	--ivp-primary-soft: rgba(167, 139, 250, 0.16);
	--ivp-primary-ring: rgba(167, 139, 250, 0.38);
	--ivp-success-soft: rgba(20, 184, 166, 0.18);
	--ivp-warning-soft: rgba(245, 158, 11, 0.18);
	--ivp-danger-soft: rgba(251, 113, 133, 0.16);
	--ivp-danger-ring: rgba(251, 113, 133, 0.34);
	--ivp-info-soft: rgba(6, 182, 212, 0.18);

	--ivp-overlay: rgba(0, 0, 0, 0.60);
	--ivp-glass: rgba(15, 15, 26, 0.72);
	--ivp-tile-action-bg: rgba(0, 0, 0, 0.62);
	--ivp-tooltip-bg: var(--ivp-n-50);
	--ivp-tooltip-text: var(--ivp-n-900);
	--ivp-skeleton-base: var(--ivp-n-800);
	--ivp-skeleton-shine: rgba(255, 255, 255, 0.07);
	--ivp-shadow-color: rgba(0, 0, 0, 0.30);
	--ivp-shadow-color-strong: rgba(0, 0, 0, 0.50);
	--ivp-glow-color: rgba(167, 139, 250, 0.42);
	--ivp-glow-edge: rgba(167, 139, 250, 0.18);
	--ivp-il-shadow: rgba(0, 0, 0, 0.32);
	--ivp-il-on-photo: rgba(255, 255, 255, 0.90);

	--ivp-aurora-1: var(--ivp-violet-deep);
	--ivp-aurora-2: var(--ivp-cyan-deep);
	--ivp-aurora-3: var(--ivp-teal-deep);
	--ivp-sunset-1: var(--ivp-amber-deep);
	--ivp-sunset-2: var(--ivp-rose-deep);
	--ivp-sunset-3: var(--ivp-pink-deep);
	--ivp-ocean-1: var(--ivp-indigo-deep);
	--ivp-ocean-2: var(--ivp-cyan-deep);
	--ivp-candy-1: var(--ivp-pink-deep);
	--ivp-candy-2: var(--ivp-violet-deep);
	--ivp-forest-1: var(--ivp-lime-deep);
	--ivp-forest-2: var(--ivp-teal-deep);
	--ivp-primary-1: var(--ivp-violet-deep);
	--ivp-primary-2: var(--ivp-indigo-deep);
	--ivp-primary-3: var(--ivp-pink-deep);
	--ivp-mesh-1: rgba(109, 40, 217, 0.32);
	--ivp-mesh-2: rgba(6, 182, 212, 0.18);
	--ivp-mesh-3: rgba(236, 72, 153, 0.18);
	--ivp-mesh-4: rgba(20, 184, 166, 0.14);
	--ivp-text-grad-1: var(--ivp-violet-light);
	--ivp-text-grad-2: var(--ivp-indigo-light);
	--ivp-text-grad-3: var(--ivp-rose-light);
}

/*
 * The plugin's own wp-admin menu entry (admin-menu.css). The admin sidebar lives outside
 * .ivp-app, so its icon colours are scoped to the plugin's menu item instead. The sidebar
 * is dark in every stock admin colour scheme, hence the light stops.
 */
#adminmenu #toplevel_page_imagevault-pro {
	--ivp-menu-icon-1: #A78BFA;
	--ivp-menu-icon-2: #22D3EE;
	--ivp-menu-icon-3: #F472B6;
	--ivp-menu-icon-glow: rgba(167, 139, 250, 0.55);
}