/* ==========================================================================
   DLI design tokens — single source of truth (mirrors design-system/MASTER.md)
   Primitive → semantic → component. Components use semantic tokens only.
   ========================================================================== */

:root {
	/* ---- Primitive: brand hues (from the DLI logo: green #00A450, red #EC1C24) ---- */
	--dli-green-50: #e9f8ef;
	--dli-green-100: #c9edd7;
	--dli-green-300: #4cc27f;
	--dli-green-500: #00a450;
	--dli-green-600: #00843f;
	--dli-green-700: #006b33;
	--dli-green-900: #003d1e;

	--dli-night-950: #05140c;
	--dli-night-900: #0a1f14;
	--dli-night-800: #12301f;
	--dli-night-700: #0f3d26;
	--dli-night-500: #1e6b45;
	--dli-night-100: #e1efe7;
	--dli-night-50: #f1f8f4;

	--dli-red-500: #ec1c24;
	--dli-red-600: #d0141b;
	--dli-red-50: #fdecec;
	--dli-amber-500: #ed9700;
	--dli-amber-300: #f7bf4d;
	--dli-amber-50: #fff6e5;

	/* Neutral greys with a hint of the brand green. */
	--dli-ink-900: #111814;
	--dli-ink-700: #2f3a33;
	--dli-ink-600: #4f5d55;
	--dli-ink-400: #87968d;
	--dli-ink-200: #dfe6e1;
	--dli-ink-100: #edf2ee;
	--dli-ink-50: #f6f9f7;
	--dli-white: #ffffff;

	/* ---- Semantic (light mode — dark mode overrides at the end of this file) ---- */
	color-scheme: light;
	--color-bg: var(--dli-white);
	--color-bg-alt: var(--dli-ink-50);
	--color-surface: var(--dli-white);
	--color-surface-2: var(--dli-night-50);
	--color-surface-3: var(--dli-ink-100);
	--color-input-bg: var(--dli-white);
	--color-text: var(--dli-ink-900);
	--color-text-2: var(--dli-ink-700);
	--color-text-muted: var(--dli-ink-600);
	--color-text-faint: var(--dli-ink-400);
	--color-heading: var(--dli-night-700);
	--color-border: var(--dli-ink-200);
	--color-link: var(--dli-green-600);
	--color-primary: var(--dli-green-600);
	--color-primary-hover: var(--dli-green-700);
	--color-primary-soft: var(--dli-green-50);
	--color-primary-text: var(--dli-green-700);
	--color-brand: var(--dli-green-500);
	--color-accent: var(--dli-amber-500);
	--color-danger: var(--dli-red-500);
	--color-danger-soft: var(--dli-red-50);
	--color-danger-text: #a3121a;
	--color-urgent-text: var(--dli-red-600);
	--color-amber-soft: var(--dli-amber-50);
	--color-amber-text: #7a4d00;
	--color-invert-bg: var(--dli-night-900);
	--color-invert-text: var(--dli-white);
	--color-dark: var(--dli-night-900);
	--color-on-dark: #eef6f1;
	--color-on-dark-muted: #a9c2b4;
	--color-header-bg: rgb(255 255 255 / 0.82);
	--color-header-bg-solid: rgb(255 255 255 / 0.95);
	--color-header-border: rgb(255 255 255 / 0.6);

	/* ---- Typography ---- */
	--font-sans: "Plus Jakarta Sans", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-bn: "Hind Siliguri", "Plus Jakarta Sans", system-ui, sans-serif;
	--fs-xs: 0.8125rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	--fs-3xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
	--fs-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
	--fs-5xl: clamp(2.6rem, 1.6rem + 4.4vw, 4.75rem);
	--lh-tight: 1.12;
	--lh-snug: 1.3;
	--lh-body: 1.65;

	/* ---- Spacing ---- */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;
	--s-10: 128px;
	--section-y: clamp(64px, 9vw, 128px);
	--container: 1200px;
	--gutter: clamp(16px, 4vw, 32px);

	/* ---- Shape & depth ---- */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(20 18 28 / 0.06), 0 2px 8px rgb(20 18 28 / 0.04);
	--shadow-md: 0 8px 24px rgb(10 31 20 / 0.10), 0 2px 6px rgb(10 31 20 / 0.06);
	--shadow-lg: 0 24px 60px rgb(10 31 20 / 0.18);
	--shadow-glow: 0 10px 40px rgb(0 164 80 / 0.35);
	--focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--dli-green-500);

	/* ---- Motion ---- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 160ms;
	--dur: 260ms;
	--dur-slow: 600ms;

	/* ---- Component tokens ---- */
	--btn-h: 48px;
	--btn-radius: var(--r-pill);
	--card-radius: var(--r-lg);
	--input-h: 48px;
	--header-h: 76px;
}

/* ==========================================================================
   Dark mode. <html data-theme="dark"> is set before paint by the inline script
   in header.php (saved choice, otherwise the device setting). Toggle: assets/js/ui/theme.js
   Contrast: body text 13:1, muted 7:1, links 8:1 on --color-bg.
   ========================================================================== */
:root[data-theme="dark"] {
	color-scheme: dark;
	--color-bg: #07120c;
	--color-bg-alt: #0b1811;
	--color-surface: #0f1f16;
	--color-surface-2: #13281c;
	--color-surface-3: #183224;
	--color-input-bg: #0b1811;
	--color-text: #e6efe9;
	--color-text-2: #c9d6ce;
	--color-text-muted: #a3b5aa;
	--color-text-faint: #7f9488;
	--color-heading: #f3faf6;
	--color-border: #223a2c;
	--color-link: #5fd394;
	--color-primary-soft: rgb(0 164 80 / 0.16);
	--color-primary-text: #6fd59b;
	--color-danger-soft: rgb(236 28 36 / 0.16);
	--color-danger-text: #ff9499;
	--color-urgent-text: #ff6b70;
	--color-amber-soft: rgb(237 151 0 / 0.16);
	--color-amber-text: #ffcb6b;
	--color-invert-bg: #e6efe9;
	--color-invert-text: #07120c;
	--color-dark: #0b1f14;
	--color-header-bg: rgb(15 31 22 / 0.82);
	--color-header-bg-solid: rgb(15 31 22 / 0.95);
	--color-header-border: rgb(255 255 255 / 0.08);
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.25);
	--shadow-md: 0 8px 24px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.3);
	--shadow-lg: 0 24px 60px rgb(0 0 0 / 0.55);
}