/* Colours for both themes. These override Frappe's Espresso tokens, so most components
   follow without their own rules. html[...] outranks Espresso's [data-theme] selectors. */

html[data-theme="dark"] {
	--g-canvas: #070a24;
	--g-mesh:
		radial-gradient(38vw 38vw at 92% 4%, rgba(214, 190, 240, 0.62), transparent 68%),
		radial-gradient(52vw 48vw at 68% 22%, rgba(82, 62, 214, 0.62), transparent 70%),
		radial-gradient(44vw 44vw at 16% 96%, rgba(150, 84, 224, 0.58), transparent 70%),
		radial-gradient(46vw 40vw at 62% 100%, rgba(34, 72, 204, 0.55), transparent 72%);
	--g-solid: #171717;
	--g-panel: rgba(13, 16, 50, 0.3);
	--g-panel-strong: rgba(14, 17, 52, 0.82);
	--g-card: rgba(255, 255, 255, 0.07);
	--g-card-hover: rgba(255, 255, 255, 0.11);
	--g-overlay: rgba(23, 26, 66, 0.94);
	--g-select-menu: #171a42;
	--g-edge: rgba(255, 255, 255, 0.16);
	--g-edge-strong: rgba(255, 255, 255, 0.28);
	--g-shadow: 0 18px 50px rgba(3, 5, 28, 0.42);
	--g-active: rgba(255, 255, 255, 0.15);
	--g-chart-line: #ffffff;
	--g-chart-fill: rgba(255, 255, 255, 0.28);
	--g-chart-bar: rgba(255, 255, 255, 0.34);
	--g-chart-bar-peak: #eef0ff;
	--g-title: #ffffff;
	--g-subtitle: rgba(226, 228, 255, 0.76);

	--surface-base: transparent;
	--surface-sidebar: transparent;
	--surface-alpha-sidebar: transparent;
	--desk-sidebar-bg: transparent;
	--surface-elevation-1: var(--g-overlay);
	--surface-elevation-2: var(--g-overlay);
	--surface-elevation-3: var(--g-overlay);
	--surface-gray-1: rgba(255, 255, 255, 0.05);
	--surface-gray-2: rgba(255, 255, 255, 0.08);
	--surface-gray-3: rgba(255, 255, 255, 0.13);
	--surface-gray-4: rgba(255, 255, 255, 0.2);
	--outline-gray-1: rgba(255, 255, 255, 0.11);
	--outline-gray-2: rgba(255, 255, 255, 0.18);
	--outline-gray-3: rgba(255, 255, 255, 0.28);

	--ink-gray-3: rgba(226, 228, 255, 0.5);
	--ink-gray-4: rgba(226, 228, 255, 0.58);
	--ink-gray-5: rgba(226, 228, 255, 0.68);
	--ink-gray-6: rgba(226, 228, 255, 0.78);
	--ink-gray-7: rgba(238, 239, 255, 0.86);
	--ink-gray-8: rgba(245, 246, 255, 0.94);
	--ink-gray-9: #ffffff;
	--placeholder-color: rgba(226, 228, 255, 0.5);
}

html[data-theme="light"] {
	--g-canvas: #eceefb;
	--g-mesh:
		radial-gradient(38vw 38vw at 92% 4%, rgba(255, 214, 236, 0.95), transparent 68%),
		radial-gradient(52vw 48vw at 68% 22%, rgba(174, 170, 255, 0.72), transparent 70%),
		radial-gradient(44vw 44vw at 16% 96%, rgba(214, 170, 255, 0.72), transparent 70%),
		radial-gradient(46vw 40vw at 62% 100%, rgba(150, 194, 255, 0.75), transparent 72%);
	--g-solid: #ffffff;
	--g-panel: rgba(255, 255, 255, 0.44);
	--g-panel-strong: rgba(255, 255, 255, 0.82);
	--g-card: rgba(255, 255, 255, 0.62);
	--g-card-hover: rgba(255, 255, 255, 0.82);
	--g-overlay: rgba(255, 255, 255, 0.96);
	--g-select-menu: #ffffff;
	--g-edge: rgba(70, 70, 150, 0.14);
	--g-edge-strong: rgba(70, 70, 150, 0.26);
	--g-shadow: 0 18px 50px rgba(72, 66, 160, 0.14);
	--g-active: rgba(255, 255, 255, 0.92);
	--g-chart-line: #5a48d8;
	--g-chart-fill: rgba(90, 72, 216, 0.24);
	--g-chart-bar: rgba(90, 72, 216, 0.28);
	--g-chart-bar-peak: #5a48d8;
	--g-title: #15173a;
	--g-subtitle: rgba(32, 34, 80, 0.72);

	--surface-base: transparent;
	--surface-sidebar: transparent;
	--surface-alpha-sidebar: transparent;
	--desk-sidebar-bg: transparent;
	--surface-elevation-1: var(--g-overlay);
	--surface-elevation-2: var(--g-overlay);
	--surface-elevation-3: var(--g-overlay);
	--surface-gray-1: rgba(60, 60, 140, 0.05);
	--surface-gray-2: rgba(60, 60, 140, 0.08);
	--surface-gray-3: rgba(60, 60, 140, 0.13);
	--surface-gray-4: rgba(60, 60, 140, 0.2);
	--outline-gray-1: rgba(60, 60, 140, 0.13);
	--outline-gray-2: rgba(60, 60, 140, 0.22);
	--outline-gray-3: rgba(60, 60, 140, 0.32);

	--ink-gray-5: #4f5273;
	--ink-gray-6: #43466a;
	--ink-gray-7: #33365a;
	--ink-gray-8: #23254a;
	--ink-gray-9: #15173a;
	--placeholder-color: rgba(50, 52, 100, 0.58);
}

html[data-theme] {
	--g-accent: linear-gradient(135deg, #7c5cf5, #4f6ef7);
	--g-accent-hover: linear-gradient(135deg, #8d71f7, #6480f9);
	--g-blur: blur(22px);
	--awesomplete-hover-bg: var(--surface-gray-3);
	--g-radius-lg: 20px;
	--g-radius-md: 14px;
	--g-gap: 12px;

	--modal-bg: var(--g-overlay);
	--popover-bg: var(--g-overlay);
	--card-bg: transparent;

	/* --surface-base is transparent so nested elements don't stack translucent layers.
	   These legacy aliases of it are text and icon colours, so they stay solid. */
	--neutral-invert: var(--g-solid);
	--text-dark: var(--g-solid);
	--icon-fill-bg: var(--g-solid);

	background: var(--g-canvas);
}

html[data-theme] body {
	background: transparent;
}

/* The browser draws an open select's list itself, on white unless told otherwise, while its
   options inherit the theme's text colour. Translucent tokens show that white through. */
html[data-theme="dark"] select {
	color-scheme: dark;
}

html[data-theme] select option,
html[data-theme] select optgroup {
	background-color: var(--g-select-menu);
	color: var(--g-title);
}

/* The fixed layer stays still while panels scroll, and it needs no backdrop-filter on the
   large panels above it because the gradient is already soft. A filter on those panels would
   also become the containing block for any position:fixed element inside them. */
html[data-theme] body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--g-mesh);
	pointer-events: none;
}

@media print {
	html[data-theme] {
		background: #fff;
	}
	html[data-theme] body::before {
		display: none;
	}
}