/**
 * Design Tokens - ZFDA Keycloak Login Theme
 * Zanzibar Food and Drug Agency
 * Colors drawn from zfda.go.tz — deep government navy, emerald green,
 * official red, and gold accents.
 */

:root {
	/* ===== ZFDA Brand Color Palette ===== */

	/* Primary – Government Navy (dominant background on left panel) */
	--navy:      hsl(214, 60%, 14%);    /* deep navy */
	--navy-mid:  hsl(214, 55%, 20%);
	--navy-light:hsl(210, 50%, 28%);

	/* Accent – ZFDA Emerald Green (Tanzanian flag, trust, health) */
	--green:     hsl(152, 68%, 32%);
	--green-mid: hsl(152, 60%, 40%);
	--green-light:hsl(152, 55%, 55%);

	/* Accent – Official Red (Zanzibar flag, alert, CTA) */
	--red:       hsl(4, 72%, 45%);
	--red-light: hsl(4, 70%, 60%);

	/* Gold – awards, regulatory stamp feel */
	--gold:      hsl(42, 88%, 52%);
	--gold-light:hsl(42, 90%, 65%);

	/* Alias the primary CTA pair used in buttons/gradients */
	--coral:     var(--red-light);   /* keeps original template references working */

	/* Neutral Colors */
	--white:     #ffffff;
	--gray-50:   hsl(210, 20%, 98%);
	--gray-100:  hsl(210, 15%, 95%);
	--gray-200:  hsl(210, 12%, 90%);
	--gray-300:  hsl(210, 10%, 83%);
	--gray-400:  hsl(210,  8%, 64%);
	--gray-500:  hsl(210,  6%, 45%);
	--gray-600:  hsl(210,  5%, 38%);
	--gray-700:  hsl(210,  4%, 30%);
	--gray-800:  hsl(210,  4%, 20%);
	--gray-900:  hsl(210,  4%, 10%);

	/* Semantic Colors */
	--error:   hsl(4, 72%, 45%);
	--success: hsl(152, 68%, 32%);
	--warning: hsl(38, 92%, 50%);
	--info:    hsl(200, 100%, 50%);

	/* ===== Spacing Scale ===== */
	--space-xs:  0.5rem;
	--space-sm:  0.75rem;
	--space-md:  1rem;
	--space-lg:  1.5rem;
	--space-xl:  2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;

	/* ===== Typography ===== */
	--font-sans:    'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-display: 'Georgia', 'Times New Roman', serif; /* official/governmental feel */
	--font-mono:    'SF Mono', 'Fira Mono', 'Source Code Pro', monospace;

	/* Font Sizes */
	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;
	--text-5xl:  3rem;

	/* Font Weights */
	--font-weight-normal:   400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;

	/* Line Heights */
	--leading-none:    1;
	--leading-tight:   1.25;
	--leading-snug:    1.375;
	--leading-normal:  1.5;
	--leading-relaxed: 1.625;
	--leading-loose:   2;

	/* Letter Spacing */
	--tracking-tighter: -0.05em;
	--tracking-tight:   -0.025em;
	--tracking-normal:   0em;
	--tracking-wide:     0.025em;
	--tracking-wider:    0.05em;
	--tracking-widest:   0.1em;

	/* ===== Shadows ===== */
	--shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
	--shadow-sm:  0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
	--shadow-md:  0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
	--shadow-lg:  0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
	--shadow-xl:  0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
	--shadow-2xl: 0 25px 50px rgba(0,0,0,0.25);
	--shadow-glow:    0 0 20px hsla(152, 68%, 32%, 0.35);
	--shadow-glow-lg: 0 0 40px hsla(152, 68%, 32%, 0.45);

	/* ===== Border Radius ===== */
	--radius-sm:   0.25rem;
	--radius-md:   0.5rem;
	--radius-lg:   0.75rem;
	--radius-xl:   1rem;
	--radius-2xl:  1.5rem;
	--radius-full: 9999px;

	/* ===== Transitions ===== */
	--transition-fast:   150ms ease-in-out;
	--transition-base:   250ms ease-in-out;
	--transition-slow:   500ms ease-in-out;
	--transition-slower: 750ms ease-in-out;

	/* ===== Z-Index Layers ===== */
	--z-base:    1;
	--z-orbs:    3;
	--z-pattern: 5;
	--z-content: 10;
	--z-overlay: 20;
	--z-modal:   50;
	--z-toast:   100;

	/* ===== Breakpoints (for reference in JS) ===== */
	--breakpoint-sm:  640px;
	--breakpoint-md:  768px;
	--breakpoint-lg:  1024px;
	--breakpoint-xl:  1280px;
	--breakpoint-2xl: 1536px;
}

/* ===== Base Reset & Global Styles ===== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.modern-page {
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--gray-900);
	background-color: var(--white);
	overflow-x: hidden;
}

/* ===== Screen Reader Only ===== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}