/* ============================================================
   DESIGN TOKENS — NoisyPixel.com
   All CSS custom properties. Never use raw hex or magic numbers
   that have a token equivalent — always use var(--token-name).
   ============================================================ */

:root {
	/* ===== Brand Colors ===== */
	--np-cyan: #0088ff; /* Primary brand blue */
	--np-magenta: #ff2e97; /* Primary CTA / accent */
	--np-orange: #ff6644; /* Hover states, urgency */
	--np-navy: #0a0e27; /* Dark section backgrounds */
	--np-navy-mid: #131736; /* Slightly lighter navy */
	--np-bright-cyan: #00ddff; /* Highlights on dark backgrounds */
	--np-purple: #7744dd; /* Gradient midpoint */
	--np-yellow: #ffb844; /* Warm accent / success */
	--np-white: #ffffff;

	/* ===== Neutrals ===== */
	--np-charcoal: #2a2a2e; /* Body text */
	--np-gray: #a0a0a8; /* Muted / secondary text */
	--np-light: #f5f5f7; /* Light section backgrounds */
	--np-border: #e0e0e5; /* Borders on light backgrounds */

	/* ===== Typography Scale ===== */
	--text-hero-size: 4rem; /* Homepage hero H1 */
	--text-hero-mobile-size: 2.5rem;
	--text-h2-size: 3rem; /* Section headings */
	--text-h2-mobile-size: 2rem;
	--text-h3-size: 2rem; /* Sub-section headings */
	--text-h3-mobile-size: 1.5rem;
	--text-h4-size: 1.5rem; /* Card headings */
	--text-body-lg-size: 1.25rem; /* Intro paragraphs */
	--text-body-size: 1.125rem; /* Body text */
	--text-body-sm-size: 1rem; /* Captions, footnotes */

	/* ===== Spacing ===== */
	--space-section: 5rem; /* Standard section vertical padding */
	--space-section-sm: 3rem; /* Compact section vertical padding */
	--space-container-max: 1280px; /* Max content width */
	--space-container-padding: 1.5rem; /* Horizontal padding on containers */

	/* ===== Shadows ===== */
	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.1);
	--shadow-btn-magenta: 0 4px 16px rgba(255, 46, 151, 0.35);
	--shadow-btn-magenta-hover: 0 6px 24px rgba(255, 46, 151, 0.5);
	--shadow-glow-cyan: 0 0 24px rgba(0, 136, 255, 0.3);
	--shadow-glow-magenta: 0 0 24px rgba(255, 46, 151, 0.3);

	/* ===== Gradients ===== */
	--gradient-np: linear-gradient(
		135deg,
		var(--np-cyan),
		var(--np-purple),
		var(--np-magenta),
		var(--np-orange)
	);
	--gradient-hero: linear-gradient(135deg, var(--np-navy) 0%, #0d1230 100%);
	--gradient-cta: linear-gradient(135deg, var(--np-navy) 0%, #0d1b4b 100%);
	--gradient-cyan-magenta: linear-gradient(135deg, var(--np-cyan), var(--np-magenta));
	--gradient-magenta-orange: linear-gradient(135deg, var(--np-magenta), var(--np-orange));
	--gradient-section: linear-gradient(180deg, var(--np-light) 0%, #ffffff 100%);

	/* ===== Border Radii ===== */
	--radius-card: 12px;
	--radius-btn: 8px;

	/* ===== Status / Semantic Colors ===== */
	--color-success: #16a34a; /* Green — published, success states */
	--color-success-light: #22c55e; /* Green — icons, text on dark surfaces */
	--color-success-bright: #4ade80; /* Green — text on semi-transparent dark badges */
	--color-warning: #d97706; /* Amber — draft, unsaved changes */
	--color-warning-light: #f59e0b; /* Amber — icons, dots, progress bars */
	--color-warning-bright: #fbbf24; /* Amber — text on semi-transparent dark badges */

	/* ===== Error / Validation Colors ===== */
	--color-error: #dc2626;
	--color-error-light: #ef4444;
	--color-error-bg: #fef2f2;
	--color-error-border: #fecaca;
	--color-error-input: #f87171;

	/* ===== Backend Theme — Light (default) ===== */
	/* Applied via data-theme attribute on layout wrapper.
     Public site does not use these variables. */
	--backend-bg: var(--np-light);
	--backend-surface: #ffffff;
	--backend-sidebar: #ffffff;
	--backend-hover: var(--np-light);
	--backend-text: var(--np-charcoal);
	--backend-text-muted: var(--np-gray);
	--backend-border: var(--np-border);
	--backend-input-bg: #ffffff;
	--backend-input-border: var(--np-border);
	--backend-nav-active-bg: rgba(0, 136, 255, 0.08);
	--backend-nav-active-text: var(--np-cyan);
	--backend-nav-active-bar: var(--np-cyan);
	--backend-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--backend-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* ===== Backend Theme — Dark ===== */
[data-theme='dark'] {
	--backend-bg: var(--np-navy);
	--backend-surface: var(--np-navy-mid);
	--backend-sidebar: rgba(255, 255, 255, 0.03);
	--backend-hover: rgba(255, 255, 255, 0.05);
	--backend-text: #f8fafc;
	--backend-text-muted: var(--np-gray);
	--backend-border: rgba(255, 255, 255, 0.08);
	--backend-input-bg: rgba(255, 255, 255, 0.05);
	--backend-input-border: rgba(255, 255, 255, 0.12);
	--backend-nav-active-bg: rgba(255, 46, 151, 0.12);
	--backend-nav-active-text: var(--np-magenta);
	--backend-nav-active-bar: var(--np-magenta);
	--backend-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
	--backend-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}