@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/*
 * EZNEXT Soft UI: design tokens.
 *
 * The single palette for the whole theme. It lives in its own file because
 * the login page is a website page and does not load the desk bundle, but it
 * must not become a second palette - both bundles include this file, in this
 * order, before anything that uses the tokens.
 */
/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */

:root,
[data-theme="light"] {
	/* mockup THEMES.light */
	--e2-srf: #ffffff;
	--e2-srf2: #fafbfd;
	--e2-srf2h: #fdfdff;
	--e2-srf3: #f3f4f8;
	--e2-srf4: #edeff5;
	--e2-bg: #f7f8fb;
	--e2-t1: #1e2432;
	--e2-t2: #4a5262;
	--e2-t3: #5a6274;
	--e2-t4: #8b93a5;
	--e2-t5: #a5adbe;
	--e2-bd: #e5e8f0;
	--e2-bd2: #c9cfdb;
	--e2-hair: #f2f4f8;
	--e2-brand: #0e96ea;
	--e2-brand-deep: #0a6fae;
	--e2-brand-tint: #e4f3fd;
	--e2-brand-tint2: #d3eafb;
	--e2-brand-bd: #a5d5f2;
	--e2-rose: #c2334d;
	--e2-rose-tint: #fce9ec;
	--e2-green: #0e9f6e;
	--e2-green-tint: #e4f6ee;

	/* mockup C_LIGHT tones: [fg, tint] */
	--e2-purple: #0e96ea;
	--e2-purple-tint: #e4f3fd;
	--e2-blue: #2f73e0;
	--e2-blue-tint: #e6effc;
	--e2-amber: #96690c;
	--e2-amber-tint: #fef3d7;
	--e2-grey: #7a8296;
	--e2-grey-tint: #f0f1f6;

	--e2-shadow: 0 1px 2px rgba(30, 36, 50, 0.04), 0 8px 24px -16px rgba(30, 36, 50, 0.18);
	--e2-shadow-sm: 0 1px 2px rgba(30, 36, 50, 0.05);
	--e2-scrollbar: #dde1ea;
	--e2-scrollbar-hover: #c9cfdb;
	--e2-selection: #cbeafb;
}

[data-theme="dark"] {
	/* mockup THEMES.dark */
	--e2-srf: #171a21;
	--e2-srf2: #1d2128;
	--e2-srf2h: #212630;
	--e2-srf3: #232830;
	--e2-srf4: #2a3039;
	--e2-bg: #0f1218;
	--e2-t1: #e8ebf1;
	--e2-t2: #c3c9d6;
	--e2-t3: #a5adbe;
	--e2-t4: #8b93a5;
	--e2-t5: #6b7385;
	--e2-bd: #272c35;
	--e2-bd2: #3a414d;
	--e2-hair: #20242b;
	--e2-brand: #33a9f2;
	--e2-brand-deep: #68c6ff;
	--e2-brand-tint: #14293a;
	--e2-brand-tint2: #1b3548;
	--e2-brand-bd: #2c4e68;
	--e2-rose: #f0708a;
	--e2-rose-tint: #2c1720;
	--e2-green: #38c08f;
	--e2-green-tint: #122a22;

	/* mockup C_DARK tones */
	--e2-purple: #4fb6f6;
	--e2-purple-tint: #14293a;
	--e2-blue: #6e9ef0;
	--e2-blue-tint: #161f31;
	--e2-amber: #d9a63a;
	--e2-amber-tint: #2a2113;
	--e2-grey: #98a0b0;
	--e2-grey-tint: #232830;

	--e2-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
	--e2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--e2-scrollbar: #2a3039;
	--e2-scrollbar-hover: #3a414d;
	--e2-selection: #1b3548;
}

/* Map the mockup palette onto Frappe's own CSS variables so stock
 * widgets, modals, dropdowns and form controls inherit it. */
:root,
[data-theme="light"],
[data-theme="dark"] {
	--e2-navbar-height: 74px;
	--e2-sidebar-width: 210px;
	/* the mockup's collapsed sidebar is an icon rail, not a hidden panel */
	--e2-rail-width: 58px;
	--e2-gutter: 26px;
	--e2-radius-brand: 9px;
	--e2-radius-item: 7px;
	--e2-radius-card: 16px;
	/* the mockup's big cards (chart, donut, activity) use 20px */
	--e2-radius-panel: 20px;
	--e2-radius-row: 14px;
	--e2-focus-ring: 0 0 0 3px rgba(14, 150, 234, 0.14);
	/* mockup popovers and the command palette */
	--e2-popover-shadow:
		0 0 0 1px var(--e2-hair), 0 18px 48px -18px rgba(30, 36, 50, 0.45);

	--font-stack: "Plus Jakarta Sans", "IBM Plex Sans Arabic", sans-serif;
	--font-stack-ar: "Cairo", "IBM Plex Sans Arabic", "Plus Jakarta Sans", sans-serif;
	--font-mono: "IBM Plex Mono", monospace;

	/* Frappe variable mapping */
	--primary: var(--e2-brand);
	--primary-color: var(--e2-brand);
	--btn-primary: var(--e2-brand);
	--btn-primary-hover: var(--e2-brand-deep);
	--btn-primary-color: #fff;
	--border-primary: var(--e2-brand);
	--link-color: var(--e2-brand);
	--link-hover-color: var(--e2-brand-deep);
	--focus-default: var(--e2-focus-ring);
	--checkbox-color: var(--e2-brand);

	--bg-color: var(--e2-bg);
	--card-bg: var(--e2-srf);
	--control-bg: var(--e2-srf);
	--control-bg-raised: var(--e2-srf2);
	--modal-bg: var(--e2-srf);
	--popover-bg: var(--e2-srf);
	--dropdown-bg: var(--e2-srf);
	--tooltip-bg: var(--e2-t1);
	--tooltip-text-color: var(--e2-srf);

	--border-color: var(--e2-bd);
	--border-color-extra-light: var(--e2-hair);
	--divider-color: var(--e2-hair);

	--text-color: var(--e2-t2);
	--text-color-2: var(--e2-t2);
	--text-color-3: var(--e2-t4);
	--heading-color: var(--e2-t1);
	/* Frappe uses --fg-color as the page canvas behind cards, not as text. */
	--fg-color: var(--e2-bg);
	--subtle-fg: var(--e2-srf3);
	--subtle-accent: var(--e2-srf3);
	--icon-stroke: var(--e2-t4);
	--icon-stroke-muted: var(--e2-t5);

	--gray-50: var(--e2-srf2);
	--gray-100: var(--e2-srf3);
	--gray-200: var(--e2-srf4);
	--gray-300: var(--e2-bd);
	--gray-400: var(--e2-bd2);
	--gray-500: var(--e2-t5);
	--gray-600: var(--e2-t4);
	--gray-700: var(--e2-t3);
	--gray-800: var(--e2-t2);
	--gray-900: var(--e2-t1);

	--alert-danger-bg: var(--e2-rose-tint);
	--alert-info-bg: var(--e2-brand-tint);
	--alert-success-bg: var(--e2-green-tint);
	--alert-warning-bg: var(--e2-amber-tint);

	--border-radius: var(--e2-radius-brand);
	--border-radius-sm: var(--e2-radius-item);
	--border-radius-md: var(--e2-radius-brand);
	--border-radius-lg: var(--e2-radius-card);
	--border-radius-xl: var(--e2-radius-card);

	--shadow-xs: var(--e2-shadow-sm);
	--shadow-sm: var(--e2-shadow-sm);
	--shadow-md: var(--e2-shadow);
	--shadow-lg: var(--e2-shadow);
}