/* ══════════════════════════════════════════════════════════════════════════
   QAF Design System v1 — single source of truth for QAFLIMS Enterprise
   Consumed by: Desk shell (qaf_lims_theme.css), website (qaf_platform.css),
   login (qaf_lims_login.css), forms (qaf_lims_form.css), documentation.

   Rules:
   - Components must reference tokens, never raw hex values.
   - Dark mode is driven by html[data-theme="dark"] (Frappe Desk + website).
   - RTL uses logical properties (inline-start/end); never left/right offsets.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Brand palette (from logo: #2563eb → #06b6d4, night #0B2A6E) ─── */
	--qaf-blue-50: #eff6ff;
	--qaf-blue-100: #dbeafe;
	--qaf-blue-200: #bfdbfe;
	--qaf-blue-300: #93c5fd;
	--qaf-blue-400: #60a5fa;
	--qaf-blue-500: #3b82f6;
	--qaf-blue-600: #1e56d9; /* QAF brand primary */
	--qaf-blue-700: #1d4ed8;
	--qaf-blue-800: #1e3a8a;
	--qaf-blue-900: #172e6e;
	--qaf-cyan-400: #22d3ee;
	--qaf-cyan-500: #06b6d4; /* logo accent */
	--qaf-cyan-600: #0891b2;
	--qaf-gold-400: #d4b45a; /* luxury highlight from navy+cyan identity */
	--qaf-gold-500: #c4a035;
	--qaf-night-900: #0b2a6e;
	--qaf-night-800: #0b3a6e;

	/* ── Site composition tokens (Alfaras methodology, QAF colors) ───── */
	--bg0: #f5f8fc;
	--bg1: #eef3fa;
	--bg2: #e3ebf6;
	--ink: #0f1b33;
	--muted: #5a6b82;
	--accent: #1e56d9;
	--accent-2: #06b6d4;
	--highlight: #c4a035;
	--night: #0b2a6e;
	--card: #ffffff;
	--border: rgba(11, 42, 110, 0.10);
	--line: rgba(11, 42, 110, 0.06);
	--container-xl: 1280px;
	--container-lg: 1000px;
	--container-md: 760px;
	--font-display: "Segoe UI Display", "Bahnschrift", "Candara", "Optima", system-ui, sans-serif;
	--font-sans: "Segoe UI", "Helvetica Neue", "Noto Sans", system-ui, sans-serif;
	--font-ar: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", "Tahoma", sans-serif;

	/* ── Neutral (slate) scale ─────────────────────────────────────────── */
	--qaf-slate-25: #fcfdfe;
	--qaf-slate-50: #f8fafc;
	--qaf-slate-100: #f1f5f9;
	--qaf-slate-200: #e2e8f0;
	--qaf-slate-300: #cbd5e1;
	--qaf-slate-400: #94a3b8;
	--qaf-slate-500: #64748b;
	--qaf-slate-600: #475569;
	--qaf-slate-700: #334155;
	--qaf-slate-800: #1e293b;
	--qaf-slate-900: #0f172a;
	--qaf-slate-950: #0b1220;

	/* ── Semantic status palette (light) ───────────────────────────────── */
	--qaf-success: #16a34a;
	--qaf-success-bg: #dcfce7;
	--qaf-success-fg: #15803d;
	--qaf-warning: #d97706;
	--qaf-warning-bg: #fef3c7;
	--qaf-warning-fg: #b45309;
	--qaf-danger: #dc2626;
	--qaf-danger-bg: #fee2e2;
	--qaf-danger-fg: #b91c1c;
	--qaf-info: #0891b2;
	--qaf-info-bg: #cffafe;
	--qaf-info-fg: #0e7490;
	--qaf-neutral-bg: var(--qaf-slate-200);
	--qaf-neutral-fg: var(--qaf-slate-700);

	/* ── Core semantic tokens (light) ──────────────────────────────────── */
	--qaf-primary: var(--qaf-blue-600);
	--qaf-primary-light: var(--qaf-blue-500);
	--qaf-primary-dark: var(--qaf-blue-800);
	--qaf-primary-soft: var(--qaf-blue-100);
	--qaf-primary-softer: var(--qaf-blue-50);
	--qaf-focus-ring: 0 0 0 3px rgba(30, 86, 217, 0.18);

	--qaf-bg: var(--qaf-slate-50);
	--qaf-surface: #eef4ff;
	--qaf-card: #ffffff;
	--qaf-card-alt: var(--qaf-slate-50);
	--qaf-sidebar-bg: var(--qaf-slate-50);
	--qaf-topbar-bg: #ffffff;
	--qaf-text: var(--qaf-slate-900);
	--qaf-text-secondary: var(--qaf-slate-700);
	--qaf-muted: var(--qaf-slate-500);
	--qaf-text-muted: var(--qaf-slate-500);
	--qaf-border: var(--qaf-slate-200);
	--qaf-border-strong: var(--qaf-slate-300);
	--qaf-hover-bg: #edf4ff;
	--qaf-active-bg: var(--qaf-blue-100);
	--qaf-input-bg: #ffffff;
	--qaf-kbd-bg: var(--qaf-slate-100);

	/* ── Typography ────────────────────────────────────────────────────── */
	--qaf-font: var(--font-sans);
	--qaf-font-ar: var(--font-ar);
	--qaf-font-display: var(--font-display);
	--qaf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	/* Type scale — use these instead of ad-hoc rem values */
	--qaf-text-2xs: 0.6875rem; /* 11px — badges, kbd, category labels */
	--qaf-text-xs: 0.75rem;    /* 12px — meta, captions */
	--qaf-text-sm: 0.8125rem;  /* 13px — nav items, table cells, controls */
	--qaf-text-md: 0.875rem;   /* 14px — body */
	--qaf-text-lg: 1rem;       /* 16px — card titles */
	--qaf-text-xl: 1.25rem;    /* 20px — section titles */
	--qaf-text-2xl: 1.5rem;    /* 24px — page titles */
	--qaf-text-3xl: 2rem;      /* 32px — hero */

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

	/* ── Radius scale ──────────────────────────────────────────────────── */
	--qaf-r-xs: 6px;   /* kbd, chips inner */
	--qaf-r-sm: 8px;   /* buttons, inputs, small controls */
	--qaf-r-md: 10px;  /* nav items, list rows */
	--qaf-r-lg: 12px;  /* cards, panels, modals */
	--qaf-r-xl: 16px;  /* page hero, large surfaces */
	--qaf-r-full: 999px;
	/* Back-compat aliases used across older styles */
	--qaf-radius: var(--qaf-r-xl);
	--qaf-radius-sm: var(--qaf-r-lg);

	/* ── Elevation (enterprise: subtle, no gimmicks) ───────────────────── */
	--qaf-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
	--qaf-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
	--qaf-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--qaf-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
	/* Back-compat aliases */
	--qaf-shadow: var(--qaf-shadow-md);
	--qaf-shadow-3d: var(--qaf-shadow-sm);

	/* ── Motion ────────────────────────────────────────────────────────── */
	--qaf-ease: cubic-bezier(0.2, 0, 0, 1);
	--qaf-t-fast: 0.12s;
	--qaf-t-med: 0.2s;
}

/* ══ Dark theme ═══════════════════════════════════════════════════════════
   Frappe Desk sets html[data-theme="dark"]; the QAF website toggle sets the
   same attribute, so a single block covers both surfaces. */
html[data-theme="dark"] {
	--qaf-primary: var(--qaf-blue-500);
	--qaf-primary-light: var(--qaf-blue-400);
	--qaf-primary-dark: var(--qaf-blue-300);
	--qaf-primary-soft: rgba(59, 130, 246, 0.18);
	--qaf-primary-softer: rgba(59, 130, 246, 0.1);
	--qaf-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.25);

	--qaf-bg: var(--qaf-slate-950);
	--qaf-surface: #0d1526;
	--qaf-card: var(--qaf-slate-800);
	--qaf-card-alt: #16223a;
	--qaf-sidebar-bg: #0f1a2e;
	--qaf-topbar-bg: var(--qaf-slate-800);
	--qaf-text: var(--qaf-slate-100);
	--qaf-text-secondary: var(--qaf-slate-300);
	--qaf-muted: var(--qaf-slate-400);
	--qaf-text-muted: var(--qaf-slate-400);
	--qaf-border: var(--qaf-slate-700);
	--qaf-border-strong: var(--qaf-slate-600);
	--qaf-hover-bg: rgba(59, 130, 246, 0.12);
	--qaf-active-bg: rgba(59, 130, 246, 0.2);
	--qaf-input-bg: var(--qaf-slate-900);
	--qaf-kbd-bg: var(--qaf-slate-700);

	--qaf-success-bg: rgba(34, 197, 94, 0.16);
	--qaf-success-fg: #4ade80;
	--qaf-warning-bg: rgba(245, 158, 11, 0.16);
	--qaf-warning-fg: #fbbf24;
	--qaf-danger-bg: rgba(239, 68, 68, 0.16);
	--qaf-danger-fg: #f87171;
	--qaf-info-bg: rgba(6, 182, 212, 0.16);
	--qaf-info-fg: #22d3ee;
	--qaf-neutral-bg: var(--qaf-slate-700);
	--qaf-neutral-fg: var(--qaf-slate-300);

	--qaf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
	--qaf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
	--qaf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--qaf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ══ Shared components ════════════════════════════════════════════════════
   Base building blocks used by Desk shell and the public website. */

/* ── Buttons ── */
.qaf-btn,
.qaf-btn-primary,
.qaf-btn-secondary,
.qaf-btn-ghost,
.qaf-btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var(--qaf-r-sm);
	font-family: inherit;
	font-size: var(--qaf-text-sm);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--qaf-t-fast) var(--qaf-ease),
		border-color var(--qaf-t-fast) var(--qaf-ease),
		color var(--qaf-t-fast) var(--qaf-ease),
		box-shadow var(--qaf-t-fast) var(--qaf-ease);
}

.qaf-btn-primary {
	background: var(--qaf-primary) !important;
	border: 1px solid var(--qaf-primary) !important;
	color: #fff !important;
	box-shadow: var(--qaf-shadow-xs);
}
.qaf-btn-primary:hover { background: var(--qaf-blue-700) !important; border-color: var(--qaf-blue-700) !important; transform: none; opacity: 1; }
.qaf-btn-primary:focus-visible { outline: none; box-shadow: var(--qaf-focus-ring); }
html[data-theme="dark"] .qaf-btn-primary:hover { background: var(--qaf-blue-400) !important; border-color: var(--qaf-blue-400) !important; }

.qaf-btn-secondary {
	background: var(--qaf-card) !important;
	border: 1px solid var(--qaf-border-strong) !important;
	color: var(--qaf-text) !important;
}
.qaf-btn-secondary:hover { background: var(--qaf-hover-bg) !important; border-color: var(--qaf-primary-light) !important; color: var(--qaf-primary) !important; }
.qaf-btn-secondary:focus-visible { outline: none; box-shadow: var(--qaf-focus-ring); }

.qaf-btn-ghost {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--qaf-muted) !important;
}
.qaf-btn-ghost:hover { background: var(--qaf-hover-bg) !important; color: var(--qaf-primary) !important; }

.qaf-btn-danger {
	background: var(--qaf-danger) !important;
	border: 1px solid var(--qaf-danger) !important;
	color: #fff !important;
}
.qaf-btn-danger:hover { filter: brightness(0.92); }

/* ── Cards ── */
.qaf-card {
	background: var(--qaf-card);
	border: 1px solid var(--qaf-border);
	border-radius: var(--qaf-r-lg);
	padding: var(--qaf-space-6);
	box-shadow: var(--qaf-shadow-xs);
	transition: border-color var(--qaf-t-med) var(--qaf-ease),
		box-shadow var(--qaf-t-med) var(--qaf-ease);
}
.qaf-card:hover { box-shadow: var(--qaf-shadow-md); transform: none; }
a.qaf-card:hover { border-color: var(--qaf-primary-light); }

/* ── Badges ── */
.qaf-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--qaf-r-xs);
	background: var(--qaf-primary-soft);
	color: var(--qaf-primary);
	font-size: var(--qaf-text-2xs);
	font-weight: 600;
	line-height: 1.6;
}
.qaf-badge-success { background: var(--qaf-success-bg); color: var(--qaf-success-fg); }
.qaf-badge-warning { background: var(--qaf-warning-bg); color: var(--qaf-warning-fg); }
.qaf-badge-danger { background: var(--qaf-danger-bg); color: var(--qaf-danger-fg); }
.qaf-badge-info,
.qaf-badge-verified { background: var(--qaf-info-bg); color: var(--qaf-info-fg); }
.qaf-badge-neutral { background: var(--qaf-neutral-bg); color: var(--qaf-neutral-fg); }

/* ── Semantic status chips (forms, lists, SaaS) ── */
.qaf-status--draft,
.qaf-status--registered,
.qaf-status--planned { background: var(--qaf-neutral-bg); color: var(--qaf-neutral-fg); }
.qaf-status--in-progress,
.qaf-status--in-testing { background: var(--qaf-primary-soft); color: var(--qaf-primary); }
.qaf-status--pending,
.qaf-status--pending-review,
.qaf-status--on-hold { background: var(--qaf-warning-bg); color: var(--qaf-warning-fg); }
.qaf-status--approved,
.qaf-status--completed,
.qaf-status--released { background: var(--qaf-success-bg); color: var(--qaf-success-fg); }
.qaf-status--rejected,
.qaf-status--cancelled,
.qaf-status--disposed { background: var(--qaf-danger-bg); color: var(--qaf-danger-fg); }

/* ── Inputs ── */
.qaf-input,
.qaf-mp-search,
.qaf-sidebar-search input {
	background: var(--qaf-input-bg);
	border: 1px solid var(--qaf-border);
	border-radius: var(--qaf-r-sm);
	color: var(--qaf-text);
	font-family: inherit;
	font-size: var(--qaf-text-sm);
	transition: border-color var(--qaf-t-fast) var(--qaf-ease),
		box-shadow var(--qaf-t-fast) var(--qaf-ease);
}
.qaf-input:focus,
.qaf-mp-search:focus,
.qaf-sidebar-search input:focus {
	outline: none;
	border-color: var(--qaf-primary-light);
	box-shadow: var(--qaf-focus-ring);
}

/* ── Tables ── */
.qaf-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--qaf-card);
	border: 1px solid var(--qaf-border);
	border-radius: var(--qaf-r-lg);
	overflow: hidden;
	font-size: var(--qaf-text-sm);
}
.qaf-table th {
	padding: 10px 14px;
	text-align: start;
	background: var(--qaf-card-alt);
	color: var(--qaf-muted);
	font-size: var(--qaf-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--qaf-border);
}
.qaf-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--qaf-border);
	color: var(--qaf-text);
}
.qaf-table tr:last-child td { border-bottom: 0; }
.qaf-table tbody tr:hover td { background: var(--qaf-hover-bg); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.qaf-btn,
	.qaf-btn-primary,
	.qaf-btn-secondary,
	.qaf-card,
	.qaf-input {
		transition: none !important;
		animation: none !important;
	}
}