@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@800&family=Poppins:wght@400;500;600&display=swap');
/*
 * Skemat (StudioApps) theme layer — loaded AFTER styles/grapheditor.css.
 * Reskins the editor by remapping the upstream CSS custom-property token
 * layer plus a small set of shape overrides (pill buttons, tinted fields,
 * carded dialogs, chip-style nav). Semantic colors are left alone.
 *
 * Palette: Deep Violet — primary #2A2AEF, dark #2A2AEF, lavender tints
 * #F0F0F3/#EBEBF0; dark-mode accent #2A2AEF. Neutral canvas/borders.
 * (Assigned palette rotated: upstream's dominant brand colour is orange
 * (#E5D700/#E5D700), too close to Slate+Amber's #E5D700 accent.)
 */
:root {
	/* Surfaces — neutral canvas */
	--ge-panel-color: #F5F5F7;
	--toolbar-color: #F5F5F7;
	--workspace-color: #F5F5F7;

	/* Inactive/active furniture */
	--inactive-color: #F5F5F7;
	--active-color: #F0F0F3;
	--active-item-color: #EBEBF0;
	--dark-active-item-color: #2A2AEF;
	--highlight-color: #F5F5F7;

	/* Accent family — Deep Violet */
	--primary-color: #2A2AEF;
	--primary-hover-color: #2A2AEF;
	--accent-color: #F0F0F3;
	--accent-hover-color: #EBEBF0;
	--accent-text-color: #2A2AEF;
	--focus-color: #2A2AEF;
	--dark-focus-color: #2A2AEF;
	--selected-color: #F0F0F3;
	--selected-hover-color: #EBEBF0;
	--mention-color: #2A2AEF;
	--dark-mention-color: #B8B8C0;
	--mention-background-color: #F0F0F3;
	--dark-mention-background-color: #000000;
	--prop-accent-color: #F0F0F3;
	--prop-accent-text-color: #2A2AEF;

	/* Dark accent ramp */
	--dark-accent-color: #2A2AEF;
	--dark-accent-text-color: #2A2AEF;
	--dark-active-accent-color: #2A2AEF;

	/* Neutral borders/text */
	--border-color: #EBEBF0;
}

/* ------------------------------------------------------------------ */
/* Buttons: pill shape, 600 weight. Primary = solid violet, white text. */
/* ------------------------------------------------------------------ */
.geBtn,
.geEditor button.geBtn,
.geSidebarFooter .gePrimaryBtn {
	border-radius: 999px;
	font-weight: 600;
}

.gePrimaryBtn,
html body .gePrimaryBtn {
	background-color: light-dark(#2A2AEF, #2A2AEF);
	color: light-dark(#FFFFFF, #000000);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(42, 42, 239, 0.25);
}

html body.geEditor .gePrimaryBtn:hover:not([disabled]),
.gePrimaryBtn:hover:not([disabled]) {
	background-color: light-dark(#2A2AEF, #B8B8C0);
	box-shadow: 0 2px 6px rgba(42, 42, 239, 0.3);
}

.geBtn:not(.gePrimaryBtn) {
	background-color: light-dark(#FFFFFF, #55555C);
	border: 1px solid light-dark(#EBEBF0, #55555C);
}

.geBtn:not(.gePrimaryBtn):hover:not([disabled]) {
	background-color: light-dark(#F0F0F3, #2A2AEF);
	border-color: light-dark(#EBEBF0, #2A2AEF);
}

/* ------------------------------------------------------------------ */
/* Fields: rounded, faint-violet resting tint, white on focus,          */
/* violet focus ring.                                                    */
/* ------------------------------------------------------------------ */
.geDialog input[type="text"],
.geDialog input[type="number"],
.geDialog input[type="password"],
.geDialog textarea,
.geDialog select,
.geEditor input[type="text"]:not(svg *, .geColorBtn),
.geEditor input[type="password"] {
	border-radius: 10px;
	background-color: light-dark(#F5F5F7, var(--dark-field-color));
	border-color: light-dark(#EBEBF0, rgba(255, 255, 255, 0.15));
}

.geDialog input[type="text"]:focus,
.geDialog input[type="number"]:focus,
.geDialog input[type="password"]:focus,
.geDialog textarea:focus,
.geDialog select:focus,
.geEditor input[type="text"]:focus:not(svg *),
.geEditor input[type="password"]:focus {
	background-color: light-dark(#FFFFFF, var(--dark-field-color));
	border-color: light-dark(#2A2AEF, #2A2AEF);
	box-shadow: 0 0 0 3px light-dark(rgba(42, 42, 239, 0.22), rgba(235, 235, 240, 0.28));
}

.geEditor input[type="checkbox"],
.geEditor input[type="radio"],
.geDialog input[type="checkbox"],
.geDialog input[type="radio"] {
	accent-color: light-dark(#2A2AEF, #2A2AEF);
}

/* ------------------------------------------------------------------ */
/* Cards / dialogs / windows / pickers: 14px radius, violet soft shadow */
/* ------------------------------------------------------------------ */
.geDialog,
html div.mxWindow {
	border-radius: 14px;
	box-shadow: 0 8px 32px rgba(42, 42, 239, 0.14), 0 2px 12px rgba(42, 42, 239, 0.10);
}

.geShapePicker,
div.mxPopupMenu,
.mxTooltip,
.geSidebarTooltip {
	border-radius: 12px;
}

/* Popup menu items: chip feel */
html table.mxPopupMenu td.mxPopupMenuItem {
	border-radius: 8px;
}
html table.mxPopupMenu tr.mxPopupMenuItemHover,
html table.mxPopupMenu tr.mxPopupMenuItemHover td {
	background-color: light-dark(#F0F0F3, #2A2AEF);
}

/* ------------------------------------------------------------------ */
/* Navigation chips: menubar items, sidebar palette titles, page tabs   */
/* ------------------------------------------------------------------ */
.geMenubar .geItem,
.geMenubarContainer .geItem {
	border-radius: 10px;
	margin: 1px 6px;
	padding: 2px 10px;
}
.geMenubar .geItem:hover,
.geMenubarContainer .geItem:hover {
	background-color: light-dark(#F0F0F3, #000000);
}
.geMenubar .geItem.geActiveItem,
.geMenubarContainer .geItem.geActiveItem {
	background-color: light-dark(#2A2AEF, #2A2AEF);
	color: light-dark(#FFFFFF, #000000);
}

.geTitle {
	border-radius: 8px;
	margin: 1px 8px;
}
.geTitle:hover {
	background-color: light-dark(#F0F0F3, transparent);
}

.geTab {
	border-radius: 10px 10px 0 0;
}

/* Sidebar/format-panel selected rows stay on the violet tint */
.geFormatTitle:hover {
	background-color: light-dark(#EBEBF0, var(--dark-highlight-color));
}

/* ------------------------------------------------------------------ */
/* Links + small accents                                                */
/* ------------------------------------------------------------------ */
.geEditor a,
.geEditor a:visited {
	color: light-dark(#2A2AEF, #2A2AEF);
}
.geEditor a:hover {
	color: light-dark(#2A2AEF, #B8B8C0);
}

/* Loading-splash block on index/teams shells */
.geBlock a {
	color: #2A2AEF;
}

/* Type — Poppins UI, Funnel Display ExtraBold headlines */
body, .geMenubar, .geToolbar, .geSidebarContainer {
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3, .geDialogTitle, .geTitle {
	font-family: 'Funnel Display', 'Poppins', sans-serif;
	font-weight: 800;
}