:root {
	--background-main: #f8f8e7;
	--primary-deep-purple: #4a154b;
	--action-mint-green: #a2e4b8;
	--secondary-coffee-brown: #8c6239;
	--accent-lilac: #d1c4e9;
	--accent-sand: #efebe9;
	--text-light: #ffffff;
	--text-dark: #333333;
	--theme-error: #b00020;
	--theme-on-error: #ffffff;
}

html[data-theme="dark"] {
	--background-main: #333333;
	--primary-deep-purple: #d6b2ef;
	--action-mint-green: #1e5c4c;
	--secondary-coffee-brown: #8c6239;
	--accent-lilac: #3e1c45;
	--accent-sand: #424242;
	--text-light: #333333;
	--text-dark: #f8f8e7;
	--theme-error: #b00020;
	--theme-on-error: #ffffff;
}

html,
body {
	width: 100%;
	overflow-x: hidden;
	position: relative;
}

/* Let's be rational :) */
* {
	box-sizing: border-box;
	max-width: 100%;
}

@keyframes pulsing-wave {
	0% {
		box-shadow: 0 0 0 0 rgba(74, 21, 75, 0.4);
	}
	70% {
		box-shadow: 0 0 0 20px rgba(74, 21, 75, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(74, 21, 75, 0);
	}
}

@media (prefers-color-scheme: dark) {
	@keyframes pulsing-wave {
    0% {
      /* Soft blue with 30% opacity */
      box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.3);
    }
    70% {
      /* Expands to 20px and fades out */
      box-shadow: 0 0 0 20px rgba(0, 122, 255, 0);
    }
    100% {
      /* Returns to zero size and remains transparent */
      box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
    }
	}
}

.pulsing-wave {
	animation: pulsing-wave 2s infinite;
	border-radius: 50%;
	z-index: 200
}

.pulsing-wave-square {
	animation: pulsing-wave 2s infinite;
	border-radius: inherit;
}

.mdc-icon-button.active {
	background-color: var(--primary-deep-purple) !important;
	color: white !important;
}