/* =====================================================================
   DESIGN SYSTEM — GLOBAL TOKENS
   Always Three Things Theme Engine (Light + Dark)
   ===================================================================== */

/* --------------------------------------------------------
   ROOT-level defaults (fallbacks)
   -------------------------------------------------------- */

:root {
	/* Colors */
	--primary: #4F46E5;
	--primary-soft: rgba(79, 70, 229, 0.15);
	--primary-dark: #4338CA;

	--accent: #F43F5E;
	--accent-glow: rgba(244, 63, 94, 0.35);

	--success: #22C55E;
	--success-soft: rgba(34, 197, 94, 0.15);

	--error: #EF4444;
	--error-soft: rgba(239, 68, 68, 0.15);

	--warning: #F59E0B;

	--info: #3B82F6;

	/* Base gray scale — adaptive via themes */
	--bg-primary: #F9FAFB;
	--bg-secondary: #FFFFFF;
	--surface: #FFFFFF;
	--surface-alt: #F1F5F9;

	--text: #0F172A;
	--text-muted: #475569;
	--text-inverse: #FFFFFF;

	--border: #E2E8F0;
	--border-strong: #CBD5E1;

	--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12);
	--shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.18);

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;

	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
				  Roboto, Helvetica, Arial, sans-serif;

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;

	/* Spacing scale (4pt grid) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 2rem;

	/* Z-index scale */
	--z-base: 1;
	--z-nav: 100;
	--z-overlay: 200;
	--z-popover: 500;
	--z-modal: 999;

	/* Animation */
	--transition-fast: 120ms ease;
	--transition-med: 220ms ease;
	--transition-slow: 380ms ease;
}

/* --------------------------------------------------------
   LIGHT THEME (explicit)
   -------------------------------------------------------- */

[data-theme="light"] {
	--bg-primary: #F8FAFC;
	--bg-secondary: #FFFFFF;

	--surface: #FFFFFF;
	--surface-alt: #F1F5F9;

	--text: #0F172A;
	--text-muted: #475569;
	--text-inverse: #FFFFFF;

	--border: #E2E8F0;
	--border-strong: #CBD5E1;

	--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12);
	--shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.18);
}

/* --------------------------------------------------------
   DARK THEME (explicit)
   -------------------------------------------------------- */

[data-theme="dark"] {
	--bg-primary: #0F172A;  /* Slate-900 */
	--bg-secondary: #1E293B; /* Slate-800 */

	--surface: #1E293B;
	--surface-alt: #334155; /* Slate-700 */

	--text: #F1F5F9;
	--text-muted: #CBD5E1;
	--text-inverse: #0F172A;

	--border: rgba(148, 163, 184, 0.25);
	--border-strong: rgba(148, 163, 184, 0.45);

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
	--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);

	--primary-soft: rgba(99, 102, 241, 0.25);
	--accent-glow: rgba(244, 63, 94, 0.45);
}

/* --------------------------------------------------------
   "Auto" Theme — follow system preference
   -------------------------------------------------------- */

[data-theme="auto"] {
	color-scheme: light dark; /* enables auto form controls */
}

/* But if system prefers dark, override with dark vars */
@media (prefers-color-scheme: dark) {
	[data-theme="auto"] {
		--bg-primary: #0F172A;
		--bg-secondary: #1E293B;

		--surface: #1E293B;
		--surface-alt: #334155;

		--text: #F1F5F9;
		--text-muted: #CBD5E1;

		--border: rgba(148, 163, 184, 0.25);
		--border-strong: rgba(148, 163, 184, 0.45);

		--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
		--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
		--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);

		--primary-soft: rgba(99, 102, 241, 0.25);
		--accent-glow: rgba(244, 63, 94, 0.45);
	}
}

/* --------------------------------------------------------
   UTILITY HELPERS
   -------------------------------------------------------- */

.hidden {
	display: none !important;
}

.text-center {
	text-align: center;
}

.flex {
	display: flex;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-between {
	display: flex;
	justify-content: space-between;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

/* --------------------------------------------------------
   TYPOGRAPHY (optional helpers)
   -------------------------------------------------------- */

.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-lg { font-size: var(--font-size-lg); }
.font-xl { font-size: var(--font-size-xl); }

.font-bold {
	font-weight: 600;
}