/* Dynamic sizes for typography, based on Fluid type scale calculator.
 * Step 0 is standard body text. Steps higher represent larger text, and lower is smaller.
 * NOTE: the sizes need to be selected to be container-based, so cqi units. */

/* @link https://utopia.fyi/type/calculator?c=310,12,1.2,1600,20,1.25,5,5,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	--step--5: clamp(0.3014rem, 0.2754rem + 0.1342cqi, 0.4096rem);
	--step--4: clamp(0.3617rem, 0.3256rem + 0.1864cqi, 0.512rem);
	--step--3: clamp(0.434rem, 0.3845rem + 0.2555cqi, 0.64rem);
	--step--2: clamp(0.5208rem, 0.4537rem + 0.3463cqi, 0.8rem);
	--step--1: clamp(0.625rem, 0.5349rem + 0.4651cqi, 1rem);
	--step-0: clamp(0.75rem, 0.6298rem + 0.6202cqi, 1.25rem);
	--step-1: clamp(0.9rem, 0.7408rem + 0.8217cqi, 1.5625rem);
	--step-2: clamp(1.08rem, 0.8702rem + 1.0829cqi, 1.9531rem);
	--step-3: clamp(1.296rem, 1.0207rem + 1.4207cqi, 2.4414rem);
	--step-4: clamp(1.5552rem, 1.1956rem + 1.8562cqi, 3.0518rem);
	--step-5: clamp(1.8662rem, 1.398rem + 2.4167cqi, 3.8147rem);
}

:root {
	/* Background of whole webapp window */
	--webapp-bg-color: rgb(180, 190, 255);
	--bg-color: color-mix(in srgb, var(--webapp-bg-color) 50%, white 50%);

	/* Panels that everything is drawn on */
	--panel-bg: rgba(246, 246, 246, 0.85);
	/* Selection buttons, panels on top of panels */
	--subpanel-bg: rgba(255, 255, 255, 0.65);
	/* Text, icons, etc. */
	--foreground-elems: #121212;
	
	/* Border */
	--border-color: rgba(from var(--foreground-elems) r g b / 0.25);

	/* Divider */
	--divider: rgba(from var(--foreground-elems) r g b / 0.19);

	/* Popup Overlay */
	--popup-background-overlay: rgba(from var(--foreground-elems) r g b / 0.7);

	/* Buttons */
	--button-main-fg: var(--foreground-elems);
	--button-main-bg: var(--subpanel-bg);

	--button-emphasized-bg: rgba(from var(--button-main-fg) r g b / 0.78);
	--button-emphasized-fg: rgba(from var(--button-main-bg) r g b / 1);

	--button-disabled-fg: color-mix(in srgb, var(--button-main-fg) 30%, var(--button-main-bg) 70%);

	--branding-main-color: transparent;

	/* Whiteboard side panel. Single source of truth so CharacterRender and
	 * the speech bubble always track its width and open/close timing. */
	--whiteboard-width: min(30rem, 40vw);
	--whiteboard-anim: 0.3s ease;
}

*::-webkit-scrollbar {
	width: 0.5rem;
	background-color: var(--panel-bg);
}

*::-webkit-scrollbar-thumb {
	border-radius: 1rem;
	height: 0.5rem;
	background-color: var(--divider);
}

h1,
h2,
h3 {
	font-family: ClashDisplay-Variable, sans-serif;
	margin: 0rem;
	color: var(--foreground-elems);
}

h1 {
	font-variation-settings: "wght" 600;
	font-size: var(--step-3);
}

h2 {
	font-variation-settings: "wght" 540;
	font-size: var(--step-2);
}

h3 {
	font-variation-settings: "wght" 500;
	font-size: var(--step-1);
}

p {
	font-family: Supreme-Variable, sans-serif, system-ui;
	font-variation-settings: "wght" 400;
	font-size: var(--step-0);
	color: var(--foreground-elems);
}

.panel {
	border-radius: var(--step-0);
	background-color: var(--panel-bg);

	&.with-branding {
		--branding-stripe-width: 0.6rem;
	
		border-block-start-style: solid;
		border-block-start-width: var(--branding-stripe-width);
		border-block-start-color: var(--branding-main-color);

		@media (max-width: 850px) {
			--branding-stripe-width: 0.3rem;
		}
	}
}

.panel-fx {
	backdrop-filter: blur(1.6rem);
	box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.05);
}

.selection-button {
	background-color: var(--subpanel-bg);
	padding: var(--step-0);
	gap: var(--step--3);
	outline: none;
	outline-color: transparent;
	border: none;
	border-radius: var(--step-0);
	transition: all 0.2s ease;
}

.selection-button.clickable {
	cursor: pointer;

	&:hover,
	&:focus-visible {
		outline: rgba(from var(--foreground-elems) r g b / 0.25) solid 2px; 
		outline-offset: -2px;
	}

	&:active {
		outline-color: rgba(from var(--foreground-elems) r g b / 0.4);		
		background-color: color-mix(in srgb, var(--subpanel-bg) 90%, var(--foreground-elems) 10%);
	}
}

/* This is a shared class with sizes for all normal actions, displayed in
 * the center of the screen, never bigger than a reasonable size, at 16/9. */
.action-parent {
	width: min(65rem, 95%);
	height: min(35rem, 100%);
	container-type: inline-size;

	padding: var(--step-2);

	@media(max-width: 850px) {
		aspect-ratio: unset;
		height: 100%;
		width: 100%;
	}

	@media(max-width: 600px) {
		padding: var(--step--1);
	}
}

.info-panel {
	display: flex;
	flex-direction: column;
	row-gap: var(--step-2);

	@media(max-width: 600px) {
		padding: var(--step--1);
	}
}

button.image-hover {
	& > img {
		transition: transform 0.3s;
	}

	&:hover,
	&:focus-visible {
		& > img {
			transform: scale(1.1);
		}
	}

	&:active {
		& > img {
			transform: scale(0.9);
		}
	}
}

.webapp-bg {		
	--white-transparent: rgba(255, 255, 255, 0.4);
	--base-transparent: rgba(from var(--webapp-bg-color) r g b / 0.4);
	
	--gradient-1: radial-gradient(var(--white-transparent), transparent);
	--gradient-2: linear-gradient(to top right, var(--base-transparent) 50%, transparent);
	--gradient-3: conic-gradient(
		from 45deg at 100% 100%, 
		var(--white-transparent), 
		var(--base-transparent), 
		var(--white-transparent)
	);

	--background-gradient: var(--gradient-1), var(--gradient-2), var(--gradient-3);

	background-color: var(--bg-color);
	background-image: var(--background-gradient);
	animation: bg-anim 15s infinite alternate;
}
@keyframes bg-anim {
	0% {
		background-size: 100% 100%;
		background-position: 0% 0%;
	}
	100% {
		background-size: 300% 250%;
		background-position: 50% 50%;
	}
}

.rich-text b,
.rich-text strong {
    font-variation-settings: 'wght' 700;
}

.rich-text i {
    font-family: Supreme-VariableItalic, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    font-style: italic;
}