:root {
	--color-white: #fff;
	--color-gray-light: #f2f2f2;
	--color-gray-mid: #ddd;
	--color-gray-dark: #6e6e6e;
	--color-black: #000;
	--color-red: #f5333f;
	--color-blue: #3cc8e1;
	--color-orange: #ff9f37;
	--color-purple: #c964cf;
	--color-green: #14bfa1;
	--color-pink: #f67599;
	--color-navy: #001a70;
	--color-yellow: #ffe600;
	--color-blue-rgb: 60, 200, 225;
	--color-green-rgb: 20, 191, 161;
	--color-navy-rgb: 0, 26, 112;
	--color-orange-rgb: 255, 159, 55;
	--color-pink-rgb: 246, 117, 153;
	--color-purple-rgb: 201, 100, 207;
	--color-red-rgb: 245, 51, 63;
	--color-yellow-rgb: 255, 230, 0;
	--color-background: var(--color-white);
	--color-background-2: var(--color-gray-light);
	--color-background-3: var(--color-gray-mid);

	/* Pale section surface — used by .more-than-manga (and any future
	   light-but-warmer band that visually echoes the warm-tour gradient's
	   pale stop). One shade darker than --color-background-2 (#f2f2f2). */
	--color-background-pale: #d9d9d9;
	--color-text: var(--color-black);
	--color-text-2: var(--color-gray-dark);
	--color-line: var(--color-black);
	--color-line-2: var(--color-gray-dark);
	--color-line-3: var(--color-gray-mid);
	--color-feedback-error-bg: #fdecea;
	--color-feedback-error-text: #611a15;
	--color-feedback-error-border: #f5c6cb;
	--color-feedback-success-bg: #edf7ed;
	--color-feedback-success-text: #1e4620;
	--color-feedback-success-border: #c3e6cb;

	/* Brand-tour gradients — the one sanctioned use of color in this otherwise
	   grayscale theme. Used only by .gradient-divider variants. See DESIGN.md →
	   Color → "Brand-tour gradient". Two palettes (cool + warm), bespoke stops
	   that live only inside these gradients. */
	--color-tour-night: #010c2d;
	--color-tour-deep: #001a70;
	--color-tour-mist: #929cbd;
	--color-tour-dawn: #d9d9d9;
	--color-tour-ember: #fd3700;
	--color-tour-flare: #ff9f36;
	--color-tour-glow: #ffdeba;
	--color-tour-tide: #1289c4;
	--color-tour-surf: #18bfa1;
	--color-tour-foam: #cafff6;
	--gradient-tour: linear-gradient(90deg, var(--color-tour-night) 0%, var(--color-tour-deep) 33%, var(--color-tour-mist) 67%, var(--color-tour-dawn) 100%);
	--gradient-tour-warm: linear-gradient(90deg, var(--color-tour-ember) 0%, var(--color-tour-flare) 50%, var(--color-tour-glow) 100%);
	--gradient-tour-aqua: linear-gradient(90deg, var(--color-tour-tide) 0%, var(--color-tour-surf) 50%, var(--color-tour-foam) 100%);
	--measure: 80ch;
	--line-height: 1.3;
	--line-height-heading: 1.1667;
	--font-family-sans-serif: "Maax", "Century Gothic", "Futura", helvetica, arial, sans-serif;
	--font-family-serif: "Galaxie Copernicus", "Palatino Linotype", "Book Antiqua", "Palatino", serif;
	--font-family-monospace: "Courier 10 Pitch", courier, monospace;
	--font-family-code: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	--type-scale: 1.125;
	--font-size-01: calc(var(--font-size-02) / var(--type-scale));
	--font-size-02: calc(var(--font-size-03) / var(--type-scale));
	--font-size-03: calc(var(--font-size-04) / var(--type-scale));
	--font-size-04: 1rem;
	--font-size-05: calc(var(--font-size-04) * var(--type-scale));
	--font-size-06: calc(var(--font-size-05) * var(--type-scale));
	--font-size-07: calc(var(--font-size-06) * var(--type-scale));
	--font-size-08: calc(var(--font-size-07) * var(--type-scale));
	--font-size-09: calc(var(--font-size-08) * var(--type-scale));
	--font-size-10: calc(var(--font-size-09) * var(--type-scale));
	--font-size-11: calc(var(--font-size-10) * var(--type-scale));
	--font-size-12: calc(var(--font-size-11) * var(--type-scale));
	--font-size-13: calc(var(--font-size-12) * var(--type-scale));
	--font-size-14: calc(var(--font-size-13) * var(--type-scale));
	--font-size-15: calc(var(--font-size-14) * var(--type-scale));
	--font-size-16: calc(var(--font-size-15) * var(--type-scale));
	--font-size-17: calc(var(--font-size-16) * var(--type-scale));
	--font-size-18: calc(var(--font-size-17) * var(--type-scale));
	--font-size-xxx-smaller: calc(var(--font-size-xx-smaller) / var(--type-scale));
	--font-size-xx-smaller: calc(var(--font-size-x-smaller) / var(--type-scale));
	--font-size-x-smaller: calc(var(--font-size-smaller) / var(--type-scale));
	--font-size-smaller: calc(1em / var(--type-scale));
	--font-size-icon-default: 2.375rem;
	--small-caps-modifier: 0.8;
	--font-size-small-caps-03: calc(var(--font-size-03) * var(--small-caps-modifier));
	--font-size-small-caps-04: calc(var(--font-size-04) * var(--small-caps-modifier));
	--font-size-small-caps-05: calc(var(--font-size-05) * var(--small-caps-modifier));
	--space-01: calc(var(--space-02) / 2);
	--space-02: calc(var(--space-03) / 2);
	--space-03: calc(var(--space-04) / 2);
	--space-04: calc(var(--space-05) / 2);
	--space-05: calc(var(--font-size-05) * var(--line-height));
	--space-06: calc(var(--space-05) * 2);
	--space-07: calc(var(--space-06) * 2);
	--space-08: calc(var(--space-07) * 2);
	--space-line: calc(var(--font-size-04) * var(--line-height));
	--border-width-sm: 0.09375rem;
	--border-width-md: 0.125rem;
	--border-width-lg: 0.25rem;
	--box-shadow-md: 0.125rem 0.25rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
	--focus-shadow-size: var(--border-width-lg);
	--site-header-bump: calc(4.0625rem + var(--space-04) * 2);
	--flow-gap-default: var(--space-05);
	--flow-gap: var(--flow-gap-default);
	--flow-gap-all: initial;
	--site-top-bump: 10rem;
}

/*
 * Status tokens — house-specific extension for the events module.
 *
 * Grayscale-only per DESIGN.md "Grayscale-only palette". The five status
 * states map to a five-level visual hierarchy in tone, with `cancelled`
 * differentiated from `not-selected` by a line-through on the badge text
 * (applied in the component CSS, since the difference is decoration, not
 * color).
 *
 *   confirmed     ▮  black bg     / white text  — strongest emphasis
 *   pending       ▮  gray-dark bg / white text  — medium-strong, "in flight"
 *   waitlist      ▮  gray-mid bg  / black text  — medium, neutral hold
 *   not-selected  ▮  gray-light   / gray-dark   — faded, final negative
 *   cancelled     ▮  gray-light   / gray-dark + line-through
 */
:root {
	--color-status-confirmed-bg: var(--color-text);
	--color-status-confirmed-text: var(--color-white);
	--color-status-pending-bg: var(--color-text-2);
	--color-status-pending-text: var(--color-white);
	--color-status-waitlist-bg: var(--color-line-3);
	--color-status-waitlist-text: var(--color-text);
	--color-status-not-selected-bg: var(--color-background-2);
	--color-status-not-selected-text: var(--color-text-2);
	--color-status-cancelled-bg: var(--color-background-2);
	--color-status-cancelled-text: var(--color-text-2);
}

.theme-dark {
	--color-background: var(--color-black);
	--color-background-2: var(--color-gray-dark);
	--color-text: var(--color-white);
	--color-text-2: var(--color-gray-light);
	--color-line: var(--color-white);
	--color-line-2: var(--color-gray-light);
	--focus-shadow: 0 0 0 var(--border-width-md) var(--color-line);
	--focus-shadow-inset: 0 0 0 calc(var(--border-width-md) * -1) var(--color-line);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}