/* **************************************************
	DESCRIPTION:  HomeLink Token Sheet
	URL: https://fluent2.microsoft.design/components/web/react
***************************************************/

/* =================TOKENS=================== */
/* ---------- OLED (Default) ---------- */
[theme="eclipse"] {
/* Layers */
	--layer-1: rgba(0, 0, 0, 1);
	--layer-1-hover: rgba(5, 5, 5, 1);
	--layer-2: rgba(12, 12, 12, 1);
	--layer-2-hover: rgba(15, 15, 15, 1);
	--layer-3: rgba(18, 18, 18, 1);
	--layer-3-hover: rgba(23, 23, 23, 1);
	--layer-4: rgba(27, 27, 27, 1);

/* Layer Borders*/
	--layer-1-border: rgba(7, 7, 7, 1);
	--layer-2-border: rgba(7, 7, 7, 1);
	--layer-3-border: rgba(7, 7, 7, 1);
	--layer-4-border: rgba(21, 21, 21, 1);

/* Special Borders*/
	--special-border: rgba(0, 95, 184, 1);

/* Visualizer Border*/
	--visualizer-border: 8px solid rgba(27, 27, 27, 1);

/* Text*/
	--text-neutral: rgba(220, 220, 220, 1);
	--text-neutral-mute: rgba(175, 175, 175, 1);
	--text-hyperlink: rgba(156, 235, 255, 1);
	--text-success: rgba(16, 124, 16, 1);
	--text-warning: rgba(247, 99, 12, 1);
	--text-danger: rgba(177, 14, 28, 1);

/* Status*/
	--status-background-informational: rgba(61, 142, 219, 0.5);
	--status-background-success: rgba(81, 154, 48, 0.5);
	--status-background-warning: rgba(255, 226, 81, 0.5);
	--status-background-danger: rgba(174, 24, 3, 0.5);
	
/* Select*/
	--select-highlight: rgba(45, 45, 45, 0.75);

/* ---------- Common Controls ---------- */
/* Standard Button */
	--button-standard-fill: rgba(25, 25, 25, 1);
	--button-standard-fill-hover: rgba(32, 32, 32, 1);
	--button-standard-fill-active: rgba(20, 20, 20, 1);
	--button-standard-fill-depressed: rgba(15, 15, 15, 1);
	--button-standard-text: var(--text-neutral);
	--button-standard-border: 1px solid rgba(32, 32, 32, 1);
	--button-standard-border-facet: 1px solid rgba(40, 40, 40, 1);
	--button-standard-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
	
	--button-standard-select-highlight: rgba(45, 45, 45, 1);
	
/* Subtle Button */
	--button-subtle-fill: rgba(40, 40, 40, 0);
	--button-subtle-fill-hover: rgba(50, 50, 50, 0.25);
	--button-subtle-fill-active: rgba(30, 30, 30, 0.25);
	--button-subtle-text: var(--text-neutral);
	--button-subtle-border: 1px solid rgba(15, 15, 15, 0);
	--button-subtle-border-facet: 1px solid rgba(25, 25, 25, 0);
	--button-subtle-shadow: 0 0 4px rgba(0, 0, 0, 0);

	--button-subtle-invert-fill: rgba(24, 24, 24, 1);
	--button-subtle-invert-fill-hover: rgba(40, 40, 40, 1);
	--button-subtle-invert-fill-active: var(--layer-1);
	--button-subtle-invert-text: var(--text-neutral);
	--button-subtle-invert-border: 1px solid rgba(65, 65, 65, 0);

/* Special Button */
	--button-special-fill: rgba(0, 95, 184, 1);
	--button-special-fill-hover: rgba(0, 105, 204, 1);
	--button-special-fill-active: rgba(0, 80, 156, 1);
	--button-special-text: var(--text-neutral);
	--button-special-border: 1px solid rgba(0, 90, 182, 1);
	--button-special-border-facet: 1px solid rgba(0, 80, 168, 1);

/* Inputs / Text Fields */
	--input-radius: var(--radius-small);
	--input-shadow: inset 0.10rem 0.10rem 0.20rem rgba(0,0,0,0.25);
	--input-fill: var(--layer-1);
	--input-fill-hover: rgba(51, 51, 51, 1);
	--input-fill-active: rgba(76, 76, 76, 1);
	--input-disabled: rgba(20, 20, 20, 1);
	--input-text: var(--text-neutral);
	--input-placeholder: color-mix(in srgb, var(--text-neutral) 50%, transparent);
	--input-border: 1px solid rgba(25, 25, 25, 1);
	--input-border-facet: 2px solid rgba(35, 35, 35, 1);
	--input-border-facet-hover: 2px solid rgba(55, 55, 55, 1);
	--input-border-facet-focus: 2px solid rgba(0, 95, 184, 1);

/* Scrollbar */
	--canvas-scrollbar-thumb: rgba(30, 30, 30, 1);
	--canvas-scrollbar-thumb-hover: rgba(40, 40, 40, 1);
	--canvas-scrollbar-thumb-active: rgba(20, 20, 20, 1);
	
/* Control Card */
	--control-card-dropdown-background-layer-2: rgba(9, 9, 9, 1);
	--control-card-dropdown-background-layer-3: rgba(15, 15, 15, 1);

/* Shadow */
	--shadow-user-object: 0px 0px 4px rgba(80, 80, 80, 1);
	--outline-user-object: solid rgba(60, 60, 60, 0.5);
}

/* ---------- Dark Mode ---------- */
[theme="twilight"] {
/* Layers */
	--layer-1: rgba(32, 32, 32, 1);
	--layer-1-hover: rgba(35, 35, 35, 1);
	--layer-2: rgba(39, 39, 39, 1);
	--layer-2-hover: rgba(42, 42, 42, 1);
	--layer-3: rgba(50, 50, 50, 1);
	--layer-3-hover: rgba(54, 54, 54, 1);
	--layer-4: rgba(60, 60, 60, 1);

/* Layer Borders*/
	--layer-1-border: rgba(29, 29, 29, 1);
	--layer-2-border: rgba(29, 29, 29, 1);
	--layer-3-border: rgba(29, 29, 29, 1);
	--layer-4-border: rgba(45, 45, 45, 1);

/* Special Borders*/
	--special-border: rgba(0, 95, 184, 1);

/* Visualizer Border*/
	--visualizer-border: 8px solid rgba(10, 10, 10, 1);

/* Text*/
	--text-neutral: rgba(230, 230, 230, 1);
	--text-neutral-mute: rgba(180, 180, 180, 1);
	--text-hyperlink: rgba(156, 235, 255, 1);
	--text-success: rgba(16, 124, 16, 1);
	--text-warning: rgba(247, 99, 12, 1);
	--text-danger: rgba(177, 14, 28, 1);

/* Status*/
	--status-background-informational: rgba(34, 175, 246, 0.5);
	--status-background-success: rgba(2, 199, 26, 0.5);
	--status-background-warning: rgba(255, 166, 0, 0.5);
	--status-background-danger: rgba(178, 22, 0, 0.5);
	
/* Select*/
	--select-highlight: rgba(100, 100, 100, 0.5);

/* ---------- Common Controls ---------- */
/* Standard Button */
	--button-standard-fill: rgba(62, 62, 62, 1);
	--button-standard-fill-hover: rgba(75, 75, 75, 1);
	--button-standard-fill-active: rgba(50, 50, 50, 1);
	--button-standard-fill-depressed: rgba(45, 45, 45, 1);
	--button-standard-text: var(--text-neutral);
	--button-standard-border: 1px solid rgba(64, 64, 64, 1);
	--button-standard-border-facet: 1px solid rgba(69, 69, 69, 1);
	--button-standard-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
	
	--button-standard-select-highlight: rgba(80, 80, 80, 1);
	
/* Subtle Button */
	--button-subtle-fill: rgba(95, 95, 95, 0);
	--button-subtle-fill-hover: rgba(45, 45, 45, 1);
	--button-subtle-fill-active: rgba(48, 48, 48, 1);
	--button-subtle-text: var(--text-neutral);
	--button-subtle-border: 1px solid rgba(50, 50, 50, 0);
	--button-subtle-border-facet: 1px solid rgba(60, 60, 60, 0);
	--button-subtle-shadow: 0 0 4px rgba(0, 0, 0, 0);

	--button-subtle-invert-fill: rgba(24, 24, 24, 1);
	--button-subtle-invert-fill-hover: rgba(40, 40, 40, 1);
	--button-subtle-invert-fill-active: var(--layer-1);
	--button-subtle-invert-text: var(--text-neutral);
	--button-subtle-invert-border: 1px solid rgba(65, 65, 65, 0);

/* Special Button */
	--button-special-fill: rgba(0, 95, 184, 1);
	--button-special-fill-hover: rgba(0, 105, 204, 1);
	--button-special-fill-active: rgba(0, 80, 156, 1);
	--button-special-text: var(--text-neutral);
	--button-special-border: 1px solid rgba(0, 90, 182, 1);
	--button-special-border-facet: 1px solid rgba(0, 80, 168, 1);

/* Inputs / Text Fields */
	--input-radius: var(--radius-small);
	--input-shadow: inset 0.10rem 0.10rem 0.20rem rgba(0,0,0,0.25);
	--input-fill: var(--layer-1);
	--input-fill-hover: rgba(51, 51, 51, 1);
	--input-fill-active: rgba(76, 76, 76, 1);
	--input-disabled: rgba(80, 80, 80, 1);
	--input-text: var(--text-neutral);
	--input-placeholder: color-mix(in srgb, var(--text-neutral) 50%, transparent);
	--input-border: 1px solid rgba(45, 45, 45, 1);
	--input-border-facet: 2px solid rgba(55, 55, 55, 1);
	--input-border-facet-hover: 2px solid rgba(75, 75, 75, 1);
	--input-border-facet-focus: 2px solid rgba(0, 95, 184, 1);

/* Scrollbar */
	--canvas-scrollbar-thumb: rgba(60, 60, 60, 1);
	--canvas-scrollbar-thumb-hover: rgba(80, 80, 80, 1);
	--canvas-scrollbar-thumb-active: rgba(70, 70, 70, 1);
	
/* Control Card */
	--control-card-dropdown-background-layer-2: rgba(34, 34, 34, 1);
	--control-card-dropdown-background-layer-3: rgba(45, 45, 45, 1);

/* Shadow */
	--shadow-user-object: 0px 0px 4px rgba(100, 100, 100, 1);
	--outline-user-object: solid rgba(80, 80, 80, 0.5);
}

/* ---------- Light Mode ---------- */
[theme="radiance"] {
/* Layers */
	--layer-1: rgba(243, 243, 243, 1);
	--layer-1-hover: rgba(238, 238, 238, 1);
	--layer-2: rgba(249, 249, 249, 1);
	--layer-2-hover: rgba(245, 245, 245, 1);
	--layer-3: rgba(249, 249, 249, 1);
	--layer-3-hover: rgba(245, 245, 245, 1);
	--layer-4: rgba(253, 253, 253, 1);

/* Layer Borders*/
	--layer-1-border: rgba(229, 229, 229, 1);
	--layer-2-border: rgba(234, 234, 234, 1);
	--layer-3-border: rgba(234, 234, 234, 1);
	--layer-4-border: rgba(239, 239, 239, 1);
	
/* Special Borders*/
	--special-border: rgba(0, 95, 184, 1);

/* Visualizer Border*/
	--visualizer-border: 8px solid rgba(10, 10, 10, 1);

/* Text*/
	--text-neutral: rgba(25, 25, 25, 1);
	--text-neutral-mute: rgba(120, 120, 120, 1);
	--text-hyperlink: rgba(0, 51, 124, 1);
	--text-success: rgba(16, 124, 16, 1);
	--text-warning: rgba(247, 99, 12, 1);
	--text-danger: rgba(177, 14, 28, 1);

/* Status*/
	--status-background-informational: rgba(0, 154, 255, 0.5);
	--status-background-success: rgba(0, 205, 0, 0.5);
	--status-background-warning: rgba(215, 158, 20, 0.5);
	--status-background-danger: rgba(255, 0, 0, 0.5);
	
/* Select*/
	--select-highlight: rgba(192, 192, 192, 0.5);

/* ---------- Common Controls ---------- */
/* Standard Button */
	--button-standard-fill: rgba(253, 253, 253, 1);
	--button-standard-fill-hover: rgba(236, 236, 236, 1);
	--button-standard-fill-active: rgba(228, 228, 228, 1);
	--button-standard-fill-depressed: rgba(220, 220, 220, 1);
	--button-standard-text: var(--text-neutral);
	--button-standard-border: 1px solid rgba(210, 210, 210, 1);
	--button-standard-border-facet: 1px solid rgba(195, 195, 195, 1);
	--button-standard-shadow: 0px 0.75px 2px rgba(0, 0, 0, 0.25);
	
	--button-standard-select-highlight: rgba(234, 234, 234, 1);
	
/* Subtle Button */
	--button-subtle-fill: rgba(206, 206, 206, 0);
	--button-subtle-fill-hover: rgba(192, 192, 192, 0.25);
	--button-subtle-fill-active: rgba(178, 178, 178, 0.25);
	--button-subtle-text: var(--text-neutral);
	--button-subtle-border: 1px solid rgba(210, 210, 210,0);
	--button-subtle-border-facet: 1px solid rgba(190, 190, 190, 0);
	--button-subtle-shadow: 0 0 2px rgba(40, 40, 40, 0);

	--button-subtle-invert-fill: rgba(24, 24, 24, 1);
	--button-subtle-invert-fill-hover: rgba(40, 40, 40, 1);
	--button-subtle-invert-fill-active: var(--layer-1);
	--button-subtle-invert-text: var(--text-neutral);
	--button-subtle-invert-border: 1px solid rgba(65, 65, 65, 0);

/* Special Button */
	--button-special-fill: rgba(0, 95, 184, 1);
	--button-special-fill-hover: rgba(0, 105, 204, 1);
	--button-special-fill-active: rgba(0, 80, 156, 1);
	--button-special-text: var(--text-neutral);
	--button-special-border: 1px solid rgba(0, 90, 182, 1);
	--button-special-border-facet: 1px solid rgba(0, 80, 168, 1);

/* Inputs / Text Fields */
	--input-radius: var(--radius-small);
	--input-shadow: inset 0.10rem 0.10rem 0.20rem rgba(0,0,0,0.25);
	--input-fill: rgba(253, 253, 253, 1);
	--input-fill-hover: rgba(230, 230, 230, 1);
	--input-fill-active: rgba(253, 253, 253, 1);
	--input-disabled: rgba(237, 237, 237, 1);
	--input-text: var(--text-neutral);
	--input-placeholder: color-mix(in srgb, var(--text-neutral) 50%, transparent);
	--input-border: 1px solid rgba(215, 215, 215, 1);
	--input-border-facet: 2px solid rgba(200, 200, 200, 1);
	--input-border-facet-hover: 2px solid rgba(150, 150, 150, 1);
	--input-border-facet-focus: 2px solid rgba(0, 95, 184, 1);

/* Scrollbar */
	--canvas-scrollbar-thumb: rgba(30, 30, 30, 1);
	--canvas-scrollbar-thumb-hover: rgba(40, 40, 40, 1);
	--canvas-scrollbar-thumb-active: rgba(20, 20, 20, 1);
	
/* Control Card */
	--control-card-dropdown-background-layer-2: rgba(245, 245, 245, 1);
	--control-card-dropdown-background-layer-3: rgba(245, 245, 245, 1);

/* Shadow */
	--shadow-user-object: 0px 0px 4px rgba(160, 160, 160, 1);
	--outline-user-object: solid rgba(200, 200, 200, 0.5);
}

:root {

/* Text*/
	--header-height: 50px;

/* Shadows */
	--shadow-menu: 0 1px 4px rgba(0, 0, 0, 0.25);
	--shadow-small: 0 0 8px rgba(0, 0, 0, 0.25);
	--shadow-medium: 0px 3px 8px rgba(0, 0, 0, 0.25);
	--shadow-large: 0 0 1rem rgba(0, 0, 0, 1);

	--shadow-inset-small: inset 0px 5px 15px -5px rgba(0, 0, 0, 0.2);
	--shadow-inset-medium: inset 0 0.1rem 0.25rem rgba(0, 0, 0, 0.25);
	--shadow-inset-large: inset 0 0.3rem 0.8rem rgba(0, 0, 0, 0.35);

/* Radius */
	--radius-small: 4px;
	--radius-small-split-left: 4px 0 0 4px;
	--radius-small-split-right: 0 4px 4px 0;
	--radius-medium: 8px;
	--radius-medium-split-top: 8px 8px 0 0;
	--radius-medium-split-bottom: 0 0 8px 8px;
	--radius-large: 12px;
	--radius-large-main-right: 12px 0 0 0;
	--radius-large-main-left: 0 12px 0 0;
}