@property --ripple-radius {
	syntax: '<length-percentage>';
	inherits: true;
	initial-value: 32px;
}

html {
	--anim-duration: 0.2s;
	
	--corner-radius-panel: 10px;
	--corner-radius-card: 8px;
	--corner-radius-tile: 6px;
	
	--color-bg: #c0c0c0;
	
	--color-pane: rgba(255, 255, 255, 0.75);
	
	--color-surface: #fafafa;
	--color-surface-r: 250;
	--color-surface-g: 250;
	--color-surface-b: 250;
	--color-on-surface: #050505;
	
	--color-tile: rgba(250, 250, 250, 0.75);
	--color-tile-light: rgba(255, 255, 255, 0.1);
	--color-tile-shadow: rgba(0, 0, 0, 0.1);
	
	--color-accent: #6699ff;
	--color-accent-r: 102;
	--color-accent-g: 153;
	--color-accent-b: 255;
	--color-accent: rgb(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b));
	--color-accent-5: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.05);
	--color-accent-10: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.1);
	--color-accent-15: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.15);
	--color-accent-20: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.2);
	--color-accent-25: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.25);
	--color-accent-50: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.5);
	
	--color-on-accent: #ffffff;
	--color-on-accent-r: 255;
	--color-on-accent-g: 255;
	--color-on-accent-b: 255;
	--color-on-accent-15: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.15);
	
	--color-tile-accent: var(--color-accent-15);
	--color-tile-accent-active: var(--color-accent-15);
	--color-tile-glow: var(--color-accent-20);
	
	/*--shadow-surface: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;*/
	--shadow-surface: rgba(0, 0, 0, 0.13) 0 1px 3px 0, rgba(0, 0, 0, 0.08) 0 1px 5px 0;
	--shadow-tile-light: inset 0px 1px 0px 0px var(--color-tile-light);
	--shadow-tile-shadow: inset 0px -1px 0px 0px var(--color-tile-shadow);
	--shadow-tile-focus-ring: 0 0 0 3px var(--color-tile-glow);
	--ripple-blur: 32px;
	
	--font-size-interactable: 0.875em; /* 14px default */
}