/* ======================================================================
 * OneERP Design Tokens — the ONLY file with raw values (design.md §3/§4)
 * Wired via hooks.py app_include_css. Pages/components must never hardcode
 * colors, spacing, radii, shadows or fonts.
 * ====================================================================== */

/* ---------------- Inter (latin subset; Bengali falls back to OS fonts) */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/one_composite_erp/fonts/inter-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/one_composite_erp/fonts/inter-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/one_composite_erp/fonts/inter-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/one_composite_erp/fonts/inter-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("/assets/one_composite_erp/fonts/inter-800.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ---------------- Brand: indigo (anchored to logo gradient) -------- */
	--oerp-indigo-50: #eef2ff;
	--oerp-indigo-100: #e0e7ff;
	--oerp-indigo-200: #c7d2fe;
	--oerp-indigo-300: #a5b4fc;
	--oerp-indigo-400: #818cf8;
	--oerp-indigo-500: #6366f1;
	--oerp-indigo-600: #4f46e5;
	--oerp-indigo-700: #4338ca;
	--oerp-indigo-800: #3730a3;
	--oerp-indigo-900: #312e81;
	--oerp-indigo-950: #1e1b4b;

	--oerp-primary: var(--oerp-indigo-700);
	--oerp-primary-hover: var(--oerp-indigo-600);
	--oerp-primary-soft: var(--oerp-indigo-100);
	--oerp-on-primary: #ffffff;
	/* Accent for text/icons on surfaces — flips lighter in dark theme */
	--oerp-accent-text: var(--oerp-indigo-700);

	/* ---------------- Neutrals: slate ---------------------------------- */
	--oerp-slate-50: #f8fafc;
	--oerp-slate-100: #f1f5f9;
	--oerp-slate-200: #e2e8f0;
	--oerp-slate-300: #cbd5e1;
	--oerp-slate-400: #94a3b8;
	--oerp-slate-500: #64748b;
	--oerp-slate-600: #475569;
	--oerp-slate-700: #334155;
	--oerp-slate-800: #1e293b;
	--oerp-slate-900: #0f172a;

	/* Semantic surface roles (light theme) */
	--oerp-surface: #ffffff;
	--oerp-surface-sunken: var(--oerp-slate-50);
	--oerp-surface-raised: #ffffff;
	--oerp-canvas: var(--oerp-slate-100);
	--oerp-border: var(--oerp-slate-200);
	--oerp-border-strong: var(--oerp-slate-300);
	--oerp-text: var(--oerp-slate-900);
	--oerp-text-muted: var(--oerp-slate-500);
	--oerp-text-faint: var(--oerp-slate-400);
	--oerp-hover-row: var(--oerp-indigo-50);

	/* ---------------- Semantic status (meaning only) ------------------- */
	--oerp-ok-fg: #15803d;
	--oerp-ok-bg: #dcfce7;
	--oerp-info-fg: #1d4ed8;
	--oerp-info-bg: #dbeafe;
	--oerp-warn-fg: #b45309;
	--oerp-warn-bg: #fef3c7;
	--oerp-risk-fg: #b91c1c;
	--oerp-risk-bg: #fee2e2;
	--oerp-neutral-fg: var(--oerp-slate-600);
	--oerp-neutral-bg: var(--oerp-slate-100);

	/* ---------------- Typography (data-dense scale) -------------------- */
	--oerp-font-family: "Inter", "Nirmala UI", "Vrinda", "Noto Sans Bengali", -apple-system, "Segoe UI", system-ui, sans-serif;
	--oerp-text-2xs: 0.6875rem;
	--oerp-text-xs: 0.75rem;
	--oerp-text-sm: 0.8125rem;
	--oerp-text-md: 0.875rem;
	--oerp-text-lg: 1rem;
	--oerp-text-xl: 1.25rem;
	--oerp-text-kpi: 1.75rem;
	--oerp-text-kpi-hero: 2.25rem;
	--oerp-nums: tabular-nums;
	--oerp-tracking-label: 0.06em;

	/* ---------------- Spacing ------------------------------------------ */
	--oerp-space-2xs: 2px;
	--oerp-space-xs: 4px;
	--oerp-space-sm: 8px;
	--oerp-space-md: 12px;
	--oerp-space-lg: 16px;
	--oerp-space-xl: 24px;
	--oerp-space-2xl: 32px;

	/* ---------------- Radius / shadow / focus -------------------------- */
	--oerp-radius-sm: 6px;
	--oerp-radius-md: 10px;
	--oerp-radius-lg: 14px;
	--oerp-radius-pill: 999px;

	--oerp-shadow-1: 0 1px 2px rgb(15 23 42 / 0.06);
	--oerp-shadow-2: 0 4px 12px rgb(15 23 42 / 0.08);
	--oerp-shadow-3: 0 12px 32px rgb(15 23 42 / 0.14);

	--oerp-focus-ring: 0 0 0 3px var(--oerp-indigo-200);

	/* ---------------- Elevation ---------------------------------------- */
	--oerp-z-nav: 100;
	--oerp-z-modal: 200;
	--oerp-z-toast: 300;

	/* ---------------- Motion ------------------------------------------- */
	--oerp-dur-fast: 120ms;
	--oerp-dur-med: 220ms;
	--oerp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* ---------------- Fixed (non theme-swapped) palettes --------------- */
	/* Giant touch-card gradients + QC tap buttons: saturated on any theme */
	--oerp-grad-info: linear-gradient(135deg, var(--oerp-indigo-800), var(--oerp-indigo-500));
	--oerp-grad-warn: linear-gradient(135deg, #b45309, #f59e0b);
	--oerp-grad-ok: linear-gradient(135deg, #047857, #10b981);
	--oerp-fixed-emerald: #10b981;
	--oerp-fixed-amber: #f59e0b;
	--oerp-fixed-orange: #f97316;
	--oerp-fixed-red: #ef4444;
	--oerp-fixed-amber-soft: #fde68a; /* demo bar title on indigo gradient */

	/* Brand action gradients (login button / ONE GROUP badge) */
	--oerp-grad-btn: linear-gradient(135deg, var(--oerp-indigo-600) 0%, var(--oerp-indigo-500) 60%, var(--oerp-indigo-700) 100%);
	--oerp-grad-brand: linear-gradient(90deg, var(--oerp-fixed-amber), var(--oerp-fixed-orange));
	--oerp-grad-aurora: linear-gradient(135deg, var(--oerp-indigo-950) 0%, var(--oerp-indigo-900) 45%, var(--oerp-slate-900) 100%);
}

/* ---------------- Dark tablet theme (design.md §4) ---------------------
 * Applied by factory-screen page JS: body.oerp-theme--dark.
 * Brand indigo stays identical; surfaces & semantic pairs swap. */
.oerp-theme--dark {
	--oerp-accent-text: var(--oerp-indigo-300);

	--oerp-canvas: #0b1120;
	--oerp-surface: #111a2e;
	--oerp-surface-sunken: #0d1526;
	--oerp-surface-raised: #111a2e;
	--oerp-border: #1e293b;
	--oerp-border-strong: #334155;
	--oerp-text: #e2e8f0;
	--oerp-text-muted: #94a3b8;
	--oerp-text-faint: #64748b;
	--oerp-hover-row: #16204a;

	--oerp-ok-bg: #052e16;
	--oerp-ok-fg: #4ade80;
	--oerp-info-bg: #172554;
	--oerp-info-fg: #93c5fd;
	--oerp-warn-bg: #451a03;
	--oerp-warn-fg: #fbbf24;
	--oerp-risk-bg: #450a0a;
	--oerp-risk-fg: #f87171;
	--oerp-neutral-bg: #1e293b;
	--oerp-neutral-fg: #94a3b8;

	--oerp-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
	--oerp-shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
	--oerp-shadow-3: 0 12px 32px rgb(0 0 0 / 0.55);
}

/* ---------------- Reduced motion: global kill-switch ------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}