/**
 * SYNCED COPY — source of truth is docs/design-system/tokens.css.
 * If you change a value, change it there first, then copy it here.
 *
 * Webfonts are self-hosted from ../fonts/ (NFR-39, fixed Phase 9 — see
 * ARCHITECTURE.md and assets/fonts/README.md for provenance/licence). This
 * used to @import Google Fonts directly; don't reintroduce that.
 */
:root {
	/* Colour */
	--tzn-surface: #fff;
	--tzn-surface-paper: #faf6f1;
	--tzn-card: #ebe1d6;
	--tzn-card-border: #e2d7cc;
	--tzn-hairline: #cfc4b8;
	--tzn-accent: #d69c7a;
	--tzn-accent-hover: #c4855f;
	--tzn-ink: #241c18;
	--tzn-ink-hover: #3a2c24;
	--tzn-ink-soft-bg: #3f342e;
	--tzn-text-muted: #5c524b;
	--tzn-on-ink: #fff;
	--tzn-on-ink-muted: #d8cec5;
	--tzn-on-ink-faint: #8a7f78;
	--tzn-danger: #b03a12;

	/* Type */
	--tzn-font-display: "Big Shoulders Display", sans-serif;
	--tzn-font-body: "Source Sans 3", system-ui, sans-serif;
	--tzn-font-mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", "Droid Sans Mono", monospace;

	/* Secondary text (eyebrows, meta lines, notes, captions): 15px mobile,
	   16px desktop at the default text size — the floor for a 45+ audience. */
	--tzn-font-size-small: 0.9375rem;

	/* Radius / shadow */
	--tzn-radius: 0px;
	--tzn-shadow-card: 0 14px 34px rgba(36, 28, 24, 0.1);

	/* Touch targets */
	--tzn-tap-min: 44px;
	--tzn-btn-height: 56px;
}

/* Load fonts once, site-wide — both are variable fonts, one file per family/style */
@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(../fonts/big-shoulders-display.woff2) format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/source-sans-3.woff2) format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/source-sans-3-italic.woff2) format("woff2");
}

body {
	background: var(--tzn-surface-paper);
	color: var(--tzn-ink);
	font-family: var(--tzn-font-body);
	font-size: 1.0625rem;
}

a {
	color: var(--tzn-ink);
	text-decoration: underline;
	text-decoration-color: var(--tzn-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-color: var(--tzn-ink);
}

/* Same box for both variants (height, padding, centered single-line label)
   so a primary and an accent ticket button always render the same size
   regardless of which one a given date card happens to use — only the
   colour differs. */
.tzn-btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tzn-btn-height);
	padding: 0 18px;
	background: var(--tzn-ink);
	color: var(--tzn-on-ink);
	font: 700 1.1875rem/1 var(--tzn-font-body);
	text-decoration: none;

	/* Transparent edge: invisible here, drawn in Windows high-contrast
	   (forced colours) so the button keeps its shape. Padding is 2px less
	   to keep the same outer size. */
	border: 2px solid transparent;
}

.tzn-btn-accent {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tzn-btn-height);
	padding: 0 18px;
	background: var(--tzn-accent);
	color: var(--tzn-ink);
	font: 700 1.1875rem/1 var(--tzn-font-body);
	text-decoration: none;
	border: 2px solid transparent; /* forced colours: see .tzn-btn-primary */
	transition: background 0.18s ease;
}

.tzn-btn-accent:hover {
	background: var(--tzn-accent-hover);
}

/* A disabled accent button: muted, not accent, so it doesn't read as
   "click me". Mitwirken's Senden is no longer disabled (council 2026-11-08:
   it stays enabled and says what is missing — assets/js/mitwirken-form.js). */
.tzn-btn-accent:disabled {
	background: var(--tzn-card-border);
	color: var(--tzn-text-muted);
	cursor: not-allowed;
}

.tzn-btn-accent:disabled:hover {
	background: var(--tzn-card-border);
}

.tzn-card {
	background: var(--tzn-card);
	border: 1px solid transparent; /* card shape in forced colours */
	padding: 20px;
	transition: background 0.18s ease;
}

a.tzn-card {
	text-decoration: none;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font: 700 1.25rem/1.2 var(--tzn-font-display);
}

a.tzn-card:hover {
	background: var(--tzn-accent);
	color: var(--tzn-ink);
}

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

/*
 * Full type ramp per tokens.json "type.scaleMobile/scaleDesktop" — h1/h2
 * existed but only partially: their desktop sizes (88/76) didn't actually
 * match the documented scale's desktop column (128/88), and h3/h4 were
 * never built at all, so every template reused h1/h2 for headings at every
 * level (page hero, single-item detail title, listing-page title, in-page
 * subsection heading alike) — the visible "everything is the same few
 * sizes, nothing like the mockups' hierarchy" effect. Four distinct roles,
 * matched to the mockups (2026-09-05 audit):
 *   h1 — the one true page hero (home headline, in/off-season)
 *   h2 — a single item's own name shown big (production/performance title)
 *   h3 — a listing/utility page's own title (Spielplan, Bilder, Über uns, …)
 *   h4 — an in-page subsection heading (Besetzung, Archiv, News, …)
 * Sizes are rem so they follow the reader's text size; each is capped at a
 * share of the viewport (min(rem, vw)) so an enlarged heading can't outgrow
 * a narrow screen. The caps never bite at the default size from 320px up
 * (e.g. 14vw = 44.8px ≥ 44px at 320px).
 */
.tzn-h1 {
	font: 800 min(4.75rem, 24vw)/0.9 var(--tzn-font-display);
	margin: 0 0 clamp(20px, 3vw, 32px);
}

.tzn-h2 {
	font: 800 min(3.625rem, 22vw)/0.95 var(--tzn-font-display);
	margin: 0 0 clamp(16px, 2.5vw, 24px);
}

.tzn-h3 {
	font: 800 min(2.75rem, 14vw)/1.05 var(--tzn-font-display);
	margin: 0 0 clamp(24px, 3.5vw, 40px);
}

.tzn-h4 {
	font: 800 min(2rem, 16vw)/1.1 var(--tzn-font-display);
	margin: clamp(28px, 4vw, 40px) 0 16px;
}

.tzn-h4:first-child,
section > .tzn-h4:first-child {
	margin-top: 0;
}

.tzn-eyebrow {
	font: 600 var(--tzn-font-size-small)/1 var(--tzn-font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tzn-text-muted);
	display: block;
	margin-bottom: 8px;
}

/* 8px at the default text size; grows faster than the text when the
   reader enlarges it (+12px per extra 16px of root size), because the
   display heading below has a line-height under 1 and its glyphs reach
   above its line box by a share of its (much larger) size. */
p.tzn-eyebrow {
	margin-block: 0 calc(0.5rem + (1rem - 16px) * 0.75);
}

.tzn-card--ink .tzn-eyebrow {
	color: var(--tzn-on-ink-muted);
}

@media (min-width: 1024px) {
	body {
		font-size: 1.3125rem;
	}

	.tzn-h1 {
		font-size: 8rem;
	}

	.tzn-h2 {
		font-size: 5.5rem;
	}

	.tzn-h3 {
		font-size: 3.625rem;
	}

	.tzn-h4 {
		font-size: min(2.5rem, 5vw);
	}

	:root {
		--tzn-font-size-small: 1rem;
	}
}