/* ERPEXTRA Website — shared design tokens */

html {
	color-scheme: dark;
	background-color: #080c14;
}

html[data-erp-theme="light"] {
	color-scheme: light;
	background-color: #f8faff;
}

body {
	background-color: var(--erp-bg);
	color: var(--erp-text);
}

.page-content-wrapper,
.page_content,
main {
	background-color: inherit;
	color: inherit;
}

/* Frappe page-builder wrappers — keep backgrounds on inner ERP sections only */
.page_content > .section {
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
}

:root,
[data-erp-theme="dark"] {
	--erp-bg: #080c14;
	--bg-color: #080c14;
	--erp-bg-alt: #07101f;
	--erp-surface: rgba(255, 255, 255, 0.04);
	--erp-surface-2: rgba(255, 255, 255, 0.07);
	--erp-surface-elevated: rgba(255, 255, 255, 0.05);
	--erp-border: rgba(255, 255, 255, 0.08);
	--erp-border-2: rgba(255, 255, 255, 0.18);
	--erp-text: #f0f4ff;
	--erp-text-soft: #8b9ab5;
	--erp-text-faint: #4e6080;
	--erp-accent: #00e5a0;
	--erp-accent-2: #2563eb;
	--erp-tag-bg: rgba(0, 229, 160, 0.09);
	--erp-accent-glow: rgba(0, 229, 160, 0.15);
	--erp-shadow: 0 10px 44px rgba(0, 0, 0, 0.55);
	--erp-on-accent: #000000;
	--erp-icon-bg: rgba(255, 255, 255, 0.06);
	--erp-grid: rgba(255, 255, 255, 0.05);

	/* Aliases used by some templates */
	--erp-card: var(--erp-surface);
	--erp-strong: var(--erp-border-2);

	--erp-accent-3: #7c5cfc;
	--erp-accent-grad: linear-gradient(135deg, var(--erp-accent), var(--erp-accent-2));
	--erp-nav-bg-solid: rgba(8, 12, 20, 0.95);
	--erp-fade-left: linear-gradient(90deg, var(--erp-bg) 0%, transparent 100%);
	--erp-fade-right: linear-gradient(270deg, var(--erp-bg) 0%, transparent 100%);
	--erp-input-focus-ring: rgba(0, 229, 160, 0.2);
	--erp-card-hover-glow: 0 8px 32px rgba(0, 229, 160, 0.15);

	--erp-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	--erp-font-display: "IBM Plex Sans", "DM Sans", sans-serif;
	--erp-font-alt: "DM Sans", sans-serif;

	--erp-radius-sm: 8px;
	--erp-radius-md: 12px;
	--erp-radius-lg: 16px;
	--erp-radius-xl: 20px;
	--erp-radius-pill: 100px;

	--erp-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--erp-section-pad: 100px 0;
	--erp-container-max: 1200px;
	--erp-container-pad: 0 24px;

	/* Banner hero gradient (distinct from page sections) */
	--erp-banner-bg: #09111d;
	--erp-banner-bg-alt: #0f1b2d;
	--erp-banner-shadow: 0 34px 80px rgba(0, 0, 0, 0.32);
}

[data-erp-theme="light"] {
	--erp-bg: #f8faff;
	--bg-color: #f8faff;
	--erp-bg-alt: #eef4ff;
	--erp-surface: rgba(255, 255, 255, 1);
	--erp-surface-2: #f1f5f9;
	--erp-surface-elevated: rgba(255, 255, 255, 0.96);
	--erp-border: rgba(37, 99, 235, 0.12);
	--erp-border-2: rgba(37, 99, 235, 0.26);
	--erp-text: #0f172a;
	--erp-text-soft: #475569;
	--erp-text-faint: #6b82a3;
	--erp-accent: #009e6f;
	--erp-accent-2: #2155d6;
	--erp-tag-bg: rgba(0, 158, 111, 0.09);
	--erp-accent-glow: rgba(0, 158, 111, 0.12);
	--erp-shadow: 0 10px 36px rgba(37, 99, 235, 0.12);
	--erp-on-accent: #ffffff;
	--erp-icon-bg: rgba(37, 99, 235, 0.07);
	--erp-grid: rgba(15, 23, 42, 0.06);

	--erp-card: var(--erp-surface);
	--erp-strong: var(--erp-border-2);

	--erp-accent-3: #6d4aff;
	--erp-accent-grad: linear-gradient(135deg, var(--erp-accent), var(--erp-accent-2));
	--erp-nav-bg-solid: rgba(248, 250, 255, 0.95);
	--erp-fade-left: linear-gradient(90deg, var(--erp-bg) 0%, transparent 100%);
	--erp-fade-right: linear-gradient(270deg, var(--erp-bg) 0%, transparent 100%);
	--erp-input-focus-ring: rgba(0, 158, 111, 0.2);
	--erp-card-hover-glow: 0 8px 32px rgba(0, 158, 111, 0.12);

	--erp-banner-bg: #f6f9fc;
	--erp-banner-bg-alt: #e9f0f7;
	--erp-banner-shadow: 0 26px 56px rgba(15, 23, 42, 0.12);
}