/* ==========================================================================
   PhotoLotus Design System
   ========================================================================== */

:root {
	/* Color tokens */
	--color-paper: #fafaf9;
	--color-ink: #090909;
	--color-accent: #ff1a88;
	--color-accent-gradient-start: #ff1a8a;
	--color-accent-gradient-end: #ff0055;
	--color-secondary: #e1e1e1;
	--color-secondary-bg: #ededed;
	--color-black: #000000;
	--color-white: #ffffff;
	--color-button-dark-start: #111111;
	--color-button-dark-end: #010101;

	/* Typography */
	--font-family-base: "Source Sans 3", sans-serif;

	--font-size-h1: 72px;
	--line-height-h1: 96px;
	--letter-spacing-h1: -4.32px;

	--font-size-h2: 64px;
	--line-height-h2: 72px;
	--letter-spacing-h2: -3.84px;

	--font-size-h3: 48px;
	--line-height-h3: 64px;
	--letter-spacing-h3: -2.88px;

	--font-size-h4: 32px;
	--line-height-h4: 48px;
	--letter-spacing-h4: -1.28px;

	--font-size-h5: 24px;
	--line-height-h5: 32px;
	--letter-spacing-h5: -0.96px;

	--font-size-h6: 18px;
	--line-height-h6: 24px;
	--letter-spacing-h6: -0.36px;

	--font-size-body: 16px;
	--line-height-body: 20px;
	--letter-spacing-body: -0.32px;

	--font-size-callout: 12px;
	--line-height-callout: 18px;
	--letter-spacing-callout: -0.24px;

	--font-size-caption: 12px;
	--line-height-caption: 18px;
	--letter-spacing-caption: 1.2px;

	/* Buttons */
	--button-radius: 64px;
	--button-padding-y: 12px;
	--button-padding-x: 24px;

	/* Cards */
	--card-width: 256px;
	--card-height: 320px;
	--card-padding: 24px;

	/* Color swatch size */
	--swatch-size: 113px;
}

* {
	box-sizing: border-box;
}

body {
	font-family: var(--font-family-base);
	color: var(--color-ink);
	background-color: var(--color-paper);
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1,
.heading-1 {
	font-family: var(--font-family-base);
	font-weight: 500; /* Medium */
	font-style: normal;
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	letter-spacing: var(--letter-spacing-h1);
	text-align: center;
	color: var(--color-black);
	margin: 0;
	text-wrap: balance;
}

h2,
.heading-2 {
	font-family: var(--font-family-base);
	font-weight: 500;
	font-style: normal;
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-h2);
	text-align: center;
	color: var(--color-black);
	margin: 0;
	text-wrap: balance;
}

h3,
.heading-3 {
	font-family: var(--font-family-base);
	font-weight: 500;
	font-style: normal;
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	letter-spacing: var(--letter-spacing-h3);
	text-align: center;
	color: var(--color-black);
	margin: 0;
	text-wrap: balance;
}

h4,
.heading-4 {
	font-family: var(--font-family-base);
	font-weight: 500;
	font-style: normal;
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
	letter-spacing: var(--letter-spacing-h4);
	text-align: center;
	color: var(--color-black);
	margin: 0;
	text-wrap: balance;
}

h5,
.heading-5 {
	font-family: var(--font-family-base);
	font-weight: 500;
	font-style: normal;
	font-size: var(--font-size-h5);
	line-height: var(--line-height-h5);
	letter-spacing: var(--letter-spacing-h5);
	text-align: center;
	color: var(--color-black);
	margin: 0;
	text-wrap: balance;
}

h6,
.heading-6 {
	font-family: var(--font-family-base);
	font-weight: 500;
	font-style: normal;
	font-size: var(--font-size-h6);
	line-height: var(--line-height-h6);
	letter-spacing: var(--letter-spacing-h6);
	text-align: center;
	color: var(--color-black);
	margin: 0;
	text-wrap: balance;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.body-text {
	font-family: var(--font-family-base);
	font-weight: 400; /* Regular */
	font-style: normal;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-body);
	text-align: center;
	color: var(--color-black);
	margin: 0;
}

a,
.link {
	font-family: var(--font-family-base);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-body);
	text-align: center;
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

.callout {
	font-family: var(--font-family-base);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-callout);
	line-height: var(--line-height-callout);
	letter-spacing: var(--letter-spacing-callout);
	text-align: center;
	color: var(--color-black);
	margin: 0;
}

.caption {
	font-family: var(--font-family-base);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	letter-spacing: var(--letter-spacing-caption);
	text-align: center;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
	margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--button-padding-y) var(--button-padding-x);
	border-radius: var(--button-radius);
	border: none;
	cursor: pointer;
	font-family: var(--font-family-base);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-body);
	text-align: center;
	white-space: nowrap;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* CTA button */
.btn-cta {
	font-weight: 700; /* Bold */
	color: var(--color-white);
	background: linear-gradient(to bottom, var(--color-accent-gradient-start), var(--color-accent-gradient-end));
}

.btn-cta:hover {
	box-shadow: 0px 0px 8px rgba(255, 26, 138, 0.2);
}

/* Regular button */
.btn-regular {
	font-weight: 600; /* SemiBold */
	color: var(--color-white);
	background: linear-gradient(to bottom, var(--color-button-dark-start), var(--color-button-dark-end));
}

.btn-regular:hover {
	background: linear-gradient(to bottom, var(--color-button-dark-end), var(--color-button-dark-start));
}

/* Secondary button */
.btn-secondary {
	font-weight: 700; /* Bold */
	color: #080808;
	background-color: var(--color-secondary-bg);
	border: 2px solid var(--color-secondary);
}

.btn-secondary:hover {
	background: linear-gradient(to bottom, #f9f9f9, var(--color-white));
	border: 2px solid var(--color-secondary);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
	width: var(--card-width);
	height: var(--card-height);
	padding: var(--card-padding);
	position: relative;
	font-family: var(--font-family-base);
}

.card .card-caption {
	font-weight: 400;
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	letter-spacing: var(--letter-spacing-caption);
	text-transform: uppercase;
	opacity: 0.7;
	margin: 0 0 34px 0;
}

.card .card-heading {
	font-weight: 500; /* Medium */
	font-size: var(--font-size-h5);
	line-height: var(--line-height-h5);
	letter-spacing: var(--letter-spacing-h5);
	margin: 0 0 10px 0;
}

.card .card-body {
	font-weight: 400;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-body);
	margin: 0;
}

.card-dark {
	background-color: var(--color-ink);
	color: #fafaf9;
}

.card-light {
	background-color: var(--color-paper);
	color: var(--color-ink);
}

/* ==========================================================================
   Color swatches
   ========================================================================== */

.color-swatch {
	width: var(--swatch-size);
	height: var(--swatch-size);
	display: inline-block;
}

.color-paper {
	background-color: var(--color-paper);
}

.color-ink {
	background-color: var(--color-ink);
}

.color-accent {
	background-color: var(--color-accent);
}

.color-secondary {
	background-color: var(--color-secondary);
}