/*
 * Salient UP design system: tokens and reusable components.
 * Source: docs/design/improv-school-2027/spec.md ("Design system"), an early draft.
 *
 * For now everything is scoped to elements inside `.up-ds`, so existing Salient pages look the
 * same in preview. Site-wide typography comes later (plan step 5). The `.up-ds` prefix also
 * gives these rules enough weight over Salient's own button, heading and link rules.
 */

:root {
	/* Colors */
	--up-red: #c00014;
	--up-black: #141414;
	--up-white: #ffffff;
	--up-yellow: #ffc72c;
	--up-butter: #fff4d6;
	--up-blush: #ffdde1;
	--up-gray: #3a3a3a;
	--up-link: #b0001a;
	--up-link-hover: #7a0012;

	/* Surfaces, by role (newer components use these; assets/css/dark.css redefines them on a
	   dark page). */
	--up-page: var(--up-white);
	--up-surface: var(--up-white);
	--up-surface-soft: var(--up-butter);
	--up-ink: var(--up-black);
	--up-muted: var(--up-gray);
	--up-line: var(--up-black);
	--up-accent-text: var(--up-red);

	/* Type */
	--up-font-display: "Archivo Black", Impact, sans-serif;
	--up-font-body: Jost, Futura, "Century Gothic", system-ui, sans-serif;
	/* Script accent: Kalam Light (Nov 12, 2026; was Yellowtail). Also liked, if it changes again:
	   Kalam Regular and Bold, Handlee, and Klee One Regular (not SemiBold). */
	--up-font-script: Kalam, "Segoe Print", "Bradley Hand", cursive;
	--up-font-script-weight: 300;

	/* Shape */
	--up-radius-card: 22px;
	--up-radius-panel: 16px;
	--up-radius-tile: 14px;
	--up-radius-pill: 999px;
	--up-shadow-card: 0 4px 0 rgba(20, 20, 20, 0.12);

	/* Layout */
	--up-content: 1080px;
	--up-content-narrow: 820px;
	--up-gutter: 5%;
}

/* ---- Base inside a design-system block ---------------------------------- */

.up-ds {
	font-family: var(--up-font-body);
	font-size: 18px;
	line-height: 1.5;
	color: var(--up-black);
	-webkit-font-smoothing: antialiased;
}

.up-ds *,
.up-ds *::before,
.up-ds *::after {
	box-sizing: border-box;
}

/* Component display rules must not override the hidden attribute. */
.up-ds [hidden] {
	display: none !important;
}

/* A [missing fact] left visible on purpose. */
.up-ds .up-placeholder {
	background: var(--up-yellow);
	padding: 0 4px;
	font-weight: 600;
}

.up-ds a:not([class]) {
	color: var(--up-link);
	font-weight: 600;
}

.up-ds a:not([class]):hover {
	color: var(--up-link-hover);
}

/* Focus ring: black on light backgrounds, yellow on red or black ones. */
.up-ds :focus-visible {
	outline: 3px solid var(--up-black);
	outline-offset: 3px;
}

.up-ds .up-on-dark :focus-visible,
.up-ds.up-on-dark :focus-visible {
	outline-color: var(--up-yellow);
}

/* ---- Type --------------------------------------------------------------- */
/* Heading rules start "html body" to outrank Salient's ".row .col h3"-style typography. */

html body .up-ds .up-h1,
html body .up-ds .up-h2,
html body .up-ds .up-card-title {
	font-family: var(--up-font-display);
	font-weight: 400;
	color: inherit;
	letter-spacing: 0;
	margin: 0;
	text-transform: none;
}

html body .up-ds .up-h1 {
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1;
	text-transform: uppercase;
}

html body .up-ds .up-h2 {
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.15;
}

html body .up-ds .up-card-title {
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.15;
}

.up-ds .up-script {
	font-family: var(--up-font-script);
	font-weight: var(--up-font-script-weight);
	font-size: clamp(34px, 4.5vw, 52px);
	line-height: 1.1;
	color: var(--up-red);
	margin: 0;
}

.up-ds .up-eyebrow {
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.up-ds .up-small {
	font-size: 17px;
	line-height: 1.45;
	color: var(--up-gray);
}

/* ---- Buttons -------------------------------------------------------------
 * .up-btn plus one of --primary (red), --secondary (black outline),
 * --highlight (yellow, for red or black bands), --outline-light (white outline,
 * for dark bands). Works on <a> and <button>.
 */

.up-ds .up-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 26px;
	border: 2px solid transparent;
	border-radius: var(--up-radius-pill);
	font-family: var(--up-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.up-ds .up-btn--primary {
	background: var(--up-red);
	border-color: var(--up-red);
	color: var(--up-white);
}

.up-ds .up-btn--primary:hover {
	background: var(--up-link-hover);
	border-color: var(--up-link-hover);
	color: var(--up-white);
}

.up-ds .up-btn--secondary {
	background: transparent;
	border-color: var(--up-black);
	color: var(--up-black);
}

.up-ds .up-btn--secondary:hover {
	background: var(--up-black);
	color: var(--up-white);
}

.up-ds .up-btn--highlight {
	background: var(--up-yellow);
	border-color: var(--up-yellow);
	color: var(--up-black);
	font-weight: 700;
}

.up-ds .up-btn--highlight:hover {
	background: var(--up-white);
	border-color: var(--up-white);
	color: var(--up-black);
}

.up-ds .up-btn--outline-light {
	background: transparent;
	border-color: var(--up-white);
	color: var(--up-white);
}

.up-ds .up-btn--outline-light:hover {
	background: var(--up-white);
	color: var(--up-black);
}

/* ---- Link chip, tag, info tile ------------------------------------------ */

.up-ds .up-chip {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 22px;
	background: var(--up-white);
	border: 2px solid var(--up-black);
	border-radius: var(--up-radius-pill);
	color: var(--up-black);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}

.up-ds .up-chip:hover {
	background: var(--up-black);
	color: var(--up-white);
}

.up-ds .up-tag {
	display: inline-block;
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: var(--up-radius-pill);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.up-ds .up-tag--red {
	background: var(--up-red);
	color: var(--up-white);
}

.up-ds .up-tag--yellow {
	background: var(--up-yellow);
	color: var(--up-black);
}

.up-ds .up-tile {
	background: var(--up-butter);
	border-radius: 12px;
	padding: 18px;
}

html body .up-ds .up-tile__title {
	display: block;
	margin: 0 0 4px;
	padding: 0;
	font-family: var(--up-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--up-black);
}

.up-ds .up-tile__text + .up-tile__text,
.up-ds .up-level-picker + .up-tile__text {
	margin-top: 10px;
}

.up-ds .up-tile__text {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--up-gray);
}

/* A button or chip whose address isn't set yet (salient_up_link()). */
.up-ds .up-link-todo {
	border-style: dashed;
	cursor: help;
	opacity: 0.75;
}

/* ---- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.up-ds *,
	.up-ds *::before,
	.up-ds *::after {
		transition: none !important;
		animation: none !important;
	}
}