/* ==========================================================================
   NoticePilot — Shared UI base (design tokens)
   The single source of truth for colours, spacing, radius and motion.
   Loaded on every NoticePilot admin screen (free main page, Pro analytics,
   Pro campaign-modal extension) so all React apps stay visually consistent.
   ========================================================================== */

:root {
	/* Brand */
	--np-brand: #0284c7;
	--np-brand-light: #f0f9ff;
	--np-brand-dark: #0c4a6e;
	--np-brand-bg: #e0f2fe;

	/* Text & Background */
	--np-text: var(--np-gray-800);
	--np-bg: #ffffff;
	--np-border: var(--np-gray-200);

	/* Neutrals */
	--np-gray-50: #f8f9fb;
	--np-gray-100: #f0f1f4;
	--np-gray-200: #e2e4e9;
	--np-gray-300: #c8cbd2;
	--np-gray-400: #9ca1ad;
	--np-gray-500: #6b7280;
	--np-gray-600: #4b5563;
	--np-gray-700: #374151;
	--np-gray-800: #1f2937;

	/* Semantic */
	--np-success: #00b894;
	--np-success-bg: #e6f9f3;
	--np-warning: #fdcb6e;
	--np-warning-bg: #fff8e6;
	--np-error: #e17055;
	--np-error-bg: #fef0ed;
	--np-info: #74b9ff;
	--np-info-bg: #eef6ff;

	/* Layout */
	--np-radius-sm: 6px;
	--np-radius-md: 10px;
	--np-radius-lg: 16px;
	--np-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--np-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1);
	--np-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
	--np-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- SVG Icon Base ---------- */
.np-icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	flex-shrink: 0;
}