/*
 * Julklappsspelet.se
 * Design Foundation 1.0
 *
 * 80% calm / 20% Christmas magic.
 */

/* ---------------------------------------------------------
   TOKENS
--------------------------------------------------------- */

:root {
	/* Core palette */
	--jks-cream: #F7F1E7;
	--jks-cream-deep: #EEE5D7;
	--jks-paper: #FCF9F4;

	--jks-midnight: #172A25;
	--jks-forest: #24473B;
	--jks-mistletoe: #3C5E50;
	--jks-sage: #9AAE9F;

	--jks-wine: #742D38;
	--jks-wine-dark: #59212A;

	--jks-gold: #B88A48;
	--jks-champagne: #D9C7A6;

	--jks-ink: #1D2824;
	--jks-muted: #66716C;
	--jks-line: rgba(23, 42, 37, 0.14);

	/* Typography */
	--jks-serif: Georgia, "Times New Roman", serif;
	--jks-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* Widths */
	--jks-wide: 1280px;
	--jks-content: 720px;

	/* Spacing */
	--jks-space-xs: 0.5rem;
	--jks-space-sm: 1rem;
	--jks-space-md: 1.5rem;
	--jks-space-lg: 2.5rem;
	--jks-space-xl: 4rem;
	--jks-space-2xl: 7rem;
	--jks-space-3xl: 10rem;

	/* Motion */
	--jks-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------
   BASE
--------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body.jks-site {
	background: var(--jks-cream);
	color: var(--jks-ink);
	font-family: var(--jks-sans);
	font-size: 18px;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.jks-site ::selection {
	background: var(--jks-champagne);
	color: var(--jks-midnight);
}

.jks-site h1,
.jks-site h2,
.jks-site h3,
.jks-site h4 {
	color: var(--jks-midnight);
	font-family: var(--jks-serif);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.04;
	text-wrap: balance;
}

.jks-site h1 {
	font-size: clamp(3rem, 7vw, 6.8rem);
}

.jks-site h2 {
	font-size: clamp(2.3rem, 4.5vw, 4.6rem);
}

.jks-site h3 {
	font-size: clamp(1.6rem, 2.5vw, 2.4rem);
}

.jks-site p {
	max-width: var(--jks-content);
}

.jks-site a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.jks-site img {
	height: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------
   EDITORIAL UTILITIES
--------------------------------------------------------- */

.jks-wrap {
	margin-inline: auto;
	max-width: var(--jks-wide);
	padding-inline: clamp(1.25rem, 4vw, 3rem);
	width: 100%;
}

.jks-prose {
	max-width: var(--jks-content);
}

.jks-section {
	padding-block: clamp(5rem, 10vw, 9rem);
}

.jks-section--forest {
	background: var(--jks-forest);
	color: var(--jks-cream);
}

.jks-section--midnight {
	background: var(--jks-midnight);
	color: var(--jks-cream);
}

.jks-section--wine {
	background: var(--jks-wine);
	color: var(--jks-cream);
}

.jks-section--forest h2,
.jks-section--forest h3,
.jks-section--midnight h2,
.jks-section--midnight h3,
.jks-section--wine h2,
.jks-section--wine h3 {
	color: var(--jks-cream);
}

.jks-eyebrow {
	color: var(--jks-wine);
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-bottom: 1.25rem;
	text-transform: uppercase;
}

.jks-section--forest .jks-eyebrow,
.jks-section--midnight .jks-eyebrow,
.jks-section--wine .jks-eyebrow {
	color: var(--jks-champagne);
}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.jks-button {
	align-items: center;
	background: var(--jks-midnight);
	border: 1px solid var(--jks-midnight);
	color: var(--jks-cream);
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 700;
	gap: 0.75rem;
	justify-content: center;
	letter-spacing: 0.08em;
	min-height: 52px;
	padding: 0.9rem 1.45rem;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color 180ms var(--jks-ease),
		border-color 180ms var(--jks-ease),
		color 180ms var(--jks-ease),
		transform 180ms var(--jks-ease);
}

.jks-button:hover,
.jks-button:focus-visible {
	background: var(--jks-forest);
	border-color: var(--jks-forest);
	color: #fff;
	transform: translateY(-1px);
}

.jks-button--light {
	background: var(--jks-cream);
	border-color: var(--jks-cream);
	color: var(--jks-midnight);
}

.jks-button--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

/* ---------------------------------------------------------
   DICE LANGUAGE
--------------------------------------------------------- */

.jks-dots {
	align-items: center;
	display: inline-flex;
	gap: 0.28rem;
}

.jks-dot {
	background: currentColor;
	border-radius: 50%;
	display: inline-block;
	height: 0.38rem;
	width: 0.38rem;
}

/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

.jks-site :focus-visible {
	outline: 2px solid var(--jks-gold);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.jks-site *,
	.jks-site *::before,
	.jks-site *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {
	body.jks-site {
		font-size: 17px;
	}

	.jks-section {
		padding-block: 4.5rem;
	}

	.jks-button {
		min-height: 54px;
	}
}