/*
 * Xtreme Nano Design System — tokens.
 * The single source of colour, spacing, type and elevation (§19, §20).
 * No component may hard-code a colour: if a value is missing here, add it
 * here rather than inventing it locally.
 */

:root {
	/* Brand ---------------------------------------------------------- */
	--xn-primary: #6C2BD9;
	--xn-primary-dark: #32105F;
	--xn-primary-light: #8B5CF6;
	--xn-accent: #FFD21F;

	/* Status --------------------------------------------------------- */
	--xn-success: #22C55E;
	--xn-warning: #F59E0B;
	--xn-error: #EF4444;
	--xn-info: #3B82F6;

	/* Type ----------------------------------------------------------- */
	--xn-font: "Cairo", "Segoe UI", "Noto Naskh Arabic", system-ui, sans-serif;
	--xn-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

	--xn-text-page: 1.75rem;   /* page title   */
	--xn-text-section: 1.25rem; /* section title */
	--xn-text-card: 1.0625rem;  /* card title   */
	--xn-text-body: 0.9375rem;  /* body         */
	--xn-text-small: 0.8125rem; /* caption      */

	--xn-weight-body: 500;
	--xn-weight-title: 700;
	--xn-weight-display: 800;

	/* Space ---------------------------------------------------------- */
	--xn-space-1: 0.25rem;
	--xn-space-2: 0.5rem;
	--xn-space-3: 0.75rem;
	--xn-space-4: 1rem;
	--xn-space-5: 1.5rem;
	--xn-space-6: 2rem;
	--xn-space-7: 3rem;

	/* Radius --------------------------------------------------------- */
	--xn-radius-sm: 8px;
	--xn-radius-md: 12px;
	--xn-radius-lg: 18px;
	--xn-radius-pill: 999px;

	/* Motion --------------------------------------------------------- */
	--xn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--xn-speed: 180ms;

	/* Layout --------------------------------------------------------- */
	--xn-sidebar-w: 244px;
	--xn-topbar-h: 64px;

	/* Instance-level default: each logo sets its own width inline, and a
	   media query can override it without fighting that inline style. */
	--xn-logo-w: 240px;
}

/* Dark mode is the default: operations run in workshops and bays where a
   bright screen is fatiguing. It is designed, not inverted (§22). */
:root,
[data-theme="dark"] {
	--xn-bg: #0B0712;
	--xn-surface: #15101D;
	--xn-surface-secondary: #1D1628;
	--xn-text: #F7F5FA;
	--xn-text-muted: #AFA7B8;
	--xn-border: #30283A;

	--xn-primary-contrast: #FFFFFF;
	--xn-ring: rgba(139, 92, 246, 0.55);
	--xn-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
	--xn-glow: rgba(108, 43, 217, 0.28);
}

/* Light mode (§21). */
[data-theme="light"] {
	--xn-bg: #F6F4FA;
	--xn-surface: #FFFFFF;
	--xn-surface-secondary: #FBFAFD;
	--xn-text: #17131C;
	--xn-text-muted: #716A7A;
	--xn-border: #E7E2ED;

	--xn-primary-contrast: #FFFFFF;
	--xn-ring: rgba(108, 43, 217, 0.35);
	--xn-shadow: 0 14px 32px -22px rgba(50, 16, 95, 0.45);
	--xn-glow: rgba(108, 43, 217, 0.12);
}