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

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
}

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

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vi, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vi, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vi, 2.5rem);
}

:root {
	--primary: rgb(67,1,255);
	--primary-content: white;
	--secondary: rgb(254,15,205);
	--secondary-content: white;
	--accent: rgb(2,211,192);
	--accent-content: black;
	--neutral: rgb(45,52,63);
	--neutral-content: white;
	--base-100: white;
	--base-200: #f2f2f2;
	--base-300: rgb(229,230,230);
	--base-content: rgb(45,52,63);
}

body[data-theme=tulips] {
	--primary: #ee6c3c;
	--primary-content: white;
	--secondary: #f49a5f;
	--secondary-content: white;
	--accent: #be3cee;
	--accent-content: white;
	--neutral: #433d25;
	--neutral-content: white;
	--base-100: #fff8ff;
	--base-200: #eeeae6;
	--base-300: #cfccc8;
	--base-content: #433d25;
}

body[data-theme=caramellatte] {
  --base-100: oklch(98% 0.016 73.684);
  --base-200: oklch(95% 0.038 75.164);
  --base-300: oklch(90% 0.076 70.697);
  --base-content: oklch(40% 0.123 38.172);
  --primary: oklch(0% 0 0);
  --primary-content: oklch(100% 0 0);
  --secondary: oklch(22.45% 0.075 37.85);
  --secondary-content: oklch(90% 0.076 70.697);
  --accent: oklch(46.44% 0.111 37.85);
  --accent-content: oklch(90% 0.076 70.697);
  --neutral: oklch(55% 0.195 38.402);
  --neutral-content: oklch(98% 0.016 73.684);
  --info: oklch(42% 0.199 265.638);
  --info-content: oklch(90% 0.076 70.697);
  --success: oklch(43% 0.095 166.913);
  --success-content: oklch(90% 0.076 70.697);
  --warning: oklch(82% 0.189 84.429);
  --warning-content: oklch(41% 0.112 45.904);
  --error: oklch(70% 0.191 22.216);
  --error-content: oklch(39% 0.141 25.723);
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary: rgb(118,127,254);
		--primary-content: black;
		--secondary: rgb(254,98,212);
		--secondary-content: black;
		--accent: rgb(44,201,183);
		--accent-content: black;
		--neutral: rgb(44,50,59);
		--neutral-content: white;
		--base-100: rgb(30,35,41);
		--base-200: rgb(26,30,35);
		--base-300: rgb(22,25,30);
		--base-content: white;
    }
	
	body[data-theme=tulips] {
		--primary: #ee6c3c;
		--primary-content: black;
		--secondary: #f49a5f;
		--secondary-content: black;
		--accent: #be3cee;
		--accent-content: black;
		--neutral: #ffd1b3;
		--neutral-content: black;
		--base-100: black;
		--base-200: #191919;
		--base-300: #323232;
		--base-content: #ffd1b3;
	}

	body[data-theme=caramellatte] {
  --base-100: oklch(24% 0.023 329.708);
  --base-200: oklch(21% 0.021 329.708);
  --base-300: oklch(16% 0.019 329.708);
  --base-content: oklch(72.354% 0.092 79.129);
  --primary: oklch(71.996% 0.123 62.756);
  --primary-content: oklch(14.399% 0.024 62.756);
  --secondary: oklch(34.465% 0.029 199.194);
  --secondary-content: oklch(86.893% 0.005 199.194);
  --accent: oklch(42.621% 0.074 224.389);
  --accent-content: oklch(88.524% 0.014 224.389);
  --neutral: oklch(16.51% 0.015 326.261);
  --neutral-content: oklch(83.302% 0.003 326.261);
  --info: oklch(79.49% 0.063 184.558);
  --info-content: oklch(15.898% 0.012 184.558);
  --success: oklch(74.722% 0.072 131.116);
  --success-content: oklch(14.944% 0.014 131.116);
  --warning: oklch(88.15% 0.14 87.722);
  --warning-content: oklch(17.63% 0.028 87.722);
  --error: oklch(77.318% 0.128 31.871);
  --error-content: oklch(15.463% 0.025 31.871);

	}
}

body {
	margin: 0;
	background: var(--base-100);
	color: var(--base-content);
	font-family: system-ui;
}

h1 {
	color: var(--primary);
}

a {
	color: currentcolor;
}

img {
	display: block;
	max-width: 100%;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	padding: 0;
}

h1, h2, h3, h4, p {
	margin-block-start: 0;
	margin-block-end: 0;
}

.stack > * + * {
	margin-block-start: var(--flow-space, 1em);
}

.prose {
  --flow-space: var(--space-m-l);
}

.prose :is(h2 + *, h3 + *, h4 + *) {
  --flow-space: var(--space-s);
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr min(60ch, calc(100% - calc(var(--space-s-m) * 2))) 1fr;
  grid-column-gap: var(--space-s-m);
}

.wrapper > * {
  grid-column: 2/2;
}

.full-bleed {
  grid-column: 1 / -1;
}

.link-expand {
	position: relative;
}

.link-expand a::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.card {
	--flow-space: var(--space-2xs);
	padding: var(--space-s-m);
	background: var(--base-200);
	border-radius: var(--space-2xs);
}

.page-header {
	margin-top: var(--space-s-m);
	margin-bottom: var(--space-l-xl);
}

.logo-wrapper {
	display: flex;
	align-items: flex-end;
	gap: var(--space-xs-s);
}

.logo-wrapper h1 {
	margin: 0;
}

.logo {
	max-width: var(--space-2xl);
}

.photo-grid {
	display: grid;
	gap: var(--space-xs-s);
	grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-3xl) * 2), 1fr));
	list-style: none;
	background: var(--base-200);
}

.photo-grid img {
	aspect-ratio: 16/9;
	object-fit: cover;
}

.download-button {
	--flow-space: var(--space-s-m);
	display: inline-flex;
	gap: var(--space-3xs);
	align-items: center;
	background: var(--accent);
	color: var(--accent-content);
	padding: var(--space-2xs);
	text-decoration: none;
	border-radius: var(--space-3xs);
}

.download-button svg {
	display: inline-block;
	width: 1em;
	height: 1em;
}


.theme-preview {
    position: fixed;
    bottom: var(--space-3xl);
    right: var(--space-xl);
    max-width: var(--space-3xl);
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: var(--space-m) 1fr;
    grid-template-rows: var(--space-m) var(--space-m);
    background-color: var(--base-100);
    color: var(--base-content);
    border: 1px solid var(--base-content);
}
.theme-preview__background-preview,
.theme-preview__color {
    display: flex;
    justify-content: center;
    justify-items: center;
}
.theme-preview__background-preview::after,
.theme-preview__color::after {
    content: '•';
    line-height: 1.5rem;
    font-size: 2em;
    font-weight: bold;
}
.theme-preview__background-preview {
    grid-column: 1;
}
.theme-preview__background-preview--base-200 {
    background-color: var(--base-200);
    color: var(--base-content);
}
.theme-preview__background-preview--base-300 {
    background-color: var(--base-300);
    color: var(--base-content);
}
.theme-preview__theme-name {
    padding: 0 var(--space-3xs);
    grid-column: 2;
}
.theme-preview__colors {
    display: flex;
    grid-column: 2;
}
.theme-preview__color {
    width: var(--space-m);
    aspect-ratio: 1 / 1;
}
.theme-preview__color--primary {
    background-color: var(--primary);
    color: var(--primary-content);
}
.theme-preview__color--secondary {
    background-color: var(--secondary);
    color: var(--secondary-content);
}
.theme-preview__color--accent {
    background-color: var(--accent);
    color: var(--accent-content);
}
.theme-preview__color--neutral {
    background-color: var(--neutral);
    color: var(--neutral-content);
}