/**
 * PureDesk design tokens.
 * Single source of truth for color, spacing, radii, and elevation.
 * Components must reference tokens, never raw values.
 */

#puredesk-app {
	/* Accent (overridden by the accent_color setting via inline style var). */
	--pd-accent: #4f46e5;
	--pd-accent-strong: #4338ca;
	--pd-accent-soft: #eef2ff;
	--pd-on-accent: #ffffff;

	/* Neutrals (2.0: slightly cooler, higher-contrast text ramp). */
	--pd-bg: #f7f8fa;
	--pd-surface: #ffffff;
	--pd-surface-2: #f2f4f7;
	--pd-surface-3: #e9ecf1;
	--pd-border: #e4e7ec;
	--pd-border-strong: #c7ccd4;
	--pd-text: #17202b;
	--pd-text-soft: #51596b;
	--pd-text-faint: #828a9b;
	--pd-overlay: rgba(13, 17, 28, 0.55);

	/* Semantic. */
	--pd-success: #16a34a;
	--pd-success-soft: #eaf7ef;
	--pd-warning: #d97706;
	--pd-warning-soft: #fdf3e4;
	--pd-danger: #dc2626;
	--pd-danger-strong: #b91c1c;
	--pd-danger-soft: #fdecec;
	--pd-on-danger: #ffffff;
	--pd-info: #0284c7;
	--pd-info-soft: #e8f4fb;

	/* Status colors. */
	--pd-status-open: #16a34a;
	--pd-status-pending: #d97706;
	--pd-status-closed: #6b7280;

	/* Priority colors. */
	--pd-priority-low: #878e99;
	--pd-priority-normal: #0284c7;
	--pd-priority-high: #ea580c;
	--pd-priority-urgent: #dc2626;

	/* Note (internal) surfaces. */
	--pd-note-bg: #fef8e7;
	--pd-note-border: #f0dfa8;

	/* Spacing (4px scale). */
	--pd-space-1: 4px;
	--pd-space-2: 8px;
	--pd-space-3: 12px;
	--pd-space-4: 16px;
	--pd-space-5: 20px;
	--pd-space-6: 24px;
	--pd-space-8: 32px;
	--pd-space-10: 40px;
	--pd-space-12: 48px;

	/* Radii. */
	--pd-radius-sm: 6px;
	--pd-radius: 10px;
	--pd-radius-lg: 14px;
	--pd-radius-full: 999px;

	/* Elevation (2.0: layered, softer). */
	--pd-shadow-xs: 0 1px 2px rgba(13, 17, 28, 0.05);
	--pd-shadow-sm: 0 1px 2px rgba(13, 17, 28, 0.05), 0 1px 3px rgba(13, 17, 28, 0.06);
	--pd-shadow: 0 2px 4px rgba(13, 17, 28, 0.05), 0 6px 16px rgba(13, 17, 28, 0.1);
	--pd-shadow-lg: 0 4px 8px rgba(13, 17, 28, 0.06), 0 16px 40px rgba(13, 17, 28, 0.18);

	/* Control metrics: every button/input/select shares one height rhythm. */
	--pd-control-h: 36px;
	--pd-control-h-sm: 28px;
	--pd-control-h-lg: 42px;

	/* Type. */
	--pd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--pd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--pd-text-xs: 12px;
	--pd-text-sm: 13px;
	--pd-text-md: 14px;
	--pd-text-lg: 16px;
	--pd-text-xl: 20px;

	/* Type scale + weights. */
	--pd-text-2xl: 24px;
	--pd-text-3xl: 28px;
	--pd-weight-medium: 500;
	--pd-weight-semibold: 600;
	--pd-weight-bold: 650;
	--pd-leading: 1.5;
	--pd-leading-tight: 1.25;
	--pd-tracking-wide: 0.05em;

	/* Layout. */
	--pd-topbar-h: 52px;
	--pd-rail-w: 232px;
	--pd-context-w: 300px;
	--pd-z-dropdown: 9990;
	--pd-z-drawer: 9994;
	--pd-z-modal: 9996;
	--pd-z-toast: 9999;

	/* Focus rings: a soft 3px halo for fields, a crisp two-tone ring for
	   buttons/interactive chrome. */
	--pd-ring: 0 0 0 2px var(--pd-surface), 0 0 0 4px var(--pd-accent);
	--pd-ring-danger: 0 0 0 2px var(--pd-surface), 0 0 0 4px var(--pd-danger);
	--pd-ring-soft: 0 0 0 3px var(--pd-accent-soft);
	--pd-ring-soft-danger: 0 0 0 3px var(--pd-danger-soft);

	/* Motion. */
	--pd-ease: cubic-bezier(0.25, 0.6, 0.3, 1);
	--pd-duration: 160ms;
	--pd-duration-slow: 280ms;
}

@keyframes puredesk-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes puredesk-pop-in {
	from { opacity: 0; transform: translateY(6px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes puredesk-slide-in-right {
	from { transform: translateX(24px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes puredesk-shimmer {
	0% { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}

@keyframes puredesk-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-color-scheme: dark) {
	#puredesk-app {
		--pd-accent-soft: #2b2a55;
		--pd-bg: #16181d;
		--pd-surface: #1e2127;
		--pd-surface-2: #252932;
		--pd-surface-3: #2c313b;
		--pd-border: #343943;
		--pd-border-strong: #454b57;
		--pd-text: #e8eaee;
		--pd-text-soft: #a6adba;
		--pd-text-faint: #79808d;
		--pd-overlay: rgba(5, 7, 12, 0.7);
		--pd-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
		--pd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
		--pd-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
		--pd-shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55);
		--pd-note-bg: #2e2913;
		--pd-note-border: #4d431d;
		--pd-success-soft: #12291a;
		--pd-warning-soft: #2f2410;
		--pd-danger: #e0403f;
		--pd-danger-strong: #f05a58;
		--pd-danger-soft: #331515;
		--pd-info-soft: #10222e;
	}
}

@media (prefers-reduced-motion: reduce) {
	#puredesk-app {
		--pd-duration: 0ms;
	}
}