/* Maas Glass Hall: an exhibition of studio glass, as a Yeti theme. The
   show's identity is a museum programme: one grotesk with a width axis, set
   wide and light for titles and small and exact for captions; square
   corners, no shadows, no rules but hairlines. Colour is the glass's own:
   each room is a whole field of its colorant, and the ink follows it. */

/* Repeats Yeti's layer order, so the element rules at the end land in the
   right place whichever file loads first. */
@layer yeti.reset, yeti.base, yeti.theme, yeti.layouts, yeti.components, yeti.utilities;

/* The ground and the ink are registered, so the page can move between
   rooms by animating two values and every token below follows them. */
@property --ground {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.35 0.17 263);
}

@property --ink {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.975 0.012 255);
}

:root {
	/* The five rooms: each colorant's field, and the ink that reads on it. */
	--cobalt: oklch(0.35 0.17 263);
	--cobalt-ink: oklch(0.975 0.012 255);
	--amber: oklch(0.75 0.145 67);
	--amber-ink: oklch(0.2 0.045 50);
	--ruby: oklch(0.45 0.185 8);
	--ruby-ink: oklch(0.975 0.014 10);
	--uranium: oklch(0.885 0.17 117);
	--uranium-ink: oklch(0.22 0.05 125);
	--clear: oklch(0.965 0.005 210);
	--clear-ink: oklch(0.18 0.012 250);
	/* The hot shop before the rooms, lit only by the furnace. */
	--furnace: oklch(0.15 0.012 45);
	--furnace-ink: oklch(0.96 0.012 70);
	/* After the rooms: the visit, with the lights down. */
	--night: oklch(0.16 0.008 260);
	--night-ink: oklch(0.95 0.006 250);

	/* An exhibition reads large and slowly: a generous base and a steep
	   scale, so a title is a title and a caption a caption. */
	--yeti-base-min: 1rem;
	--yeti-base-max: 1.125rem;
	--yeti-ratio-min: 1.25;
	--yeti-ratio-max: 1.414;

	/* One face. Wide and light for display, a touch wide for text. */
	--yeti-font-sans: "Mona Sans", system-ui, sans-serif;
	--yeti-stretch-text: 104%;
	--yeti-stretch-heading: 125%;
	--yeti-stretch-small: 108%;
	--yeti-tracking-heading: -0.025em;
	--yeti-weight-normal: 400;
	--yeti-weight-strong: 560;
	--yeti-weight-bold: 640;
	--yeti-button-weight: 560;
	--yeti-leading-tight: 1.05;

	/* Flat and hairline. Plates are square-cut like a catalogue print; the
	   things a hand presses, the button and the fields, take a 3px corner. */
	--yeti-radius-sm: 3px;
	--yeti-radius-md: 0;
	--yeti-radius-lg: 0;
	--yeti-button-radius: 3px;
	--yeti-badge-radius: 0;
	--yeti-card-radius: 0;
	--yeti-control-radius: 3px;
	--yeti-nav-radius: 3px;
	--yeti-shadow-sm: none;
	--yeti-shadow-md: none;
	--yeti-border-width: 1px;
	--yeti-control-surface: transparent;
	--yeti-table-stripe: transparent;
	--yeti-nav-border: transparent;
	--yeti-nav-brand-weight: var(--yeti-weight-strong);
	--yeti-nav-brand-size: var(--yeti-text-md);

	/* Arrivals are slow and settle: a museum does not hurry. */
	--yeti-enter-duration: 1100ms;
	--yeti-enter-distance: 2.5rem;
	--yeti-enter-stagger: 120ms;
	--yeti-enter-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Every colour on the page is the ground or the ink, or a mix of the two.
   They are declared again on each room and on the foot, so a room that
   paints its own field (where the page cannot cross-fade) mixes them from
   its own colours rather than inheriting the opening's. The primary is the
   ink itself: the one filled button is an ink plate with ground-coloured
   lettering, in whatever room it stands; the top bar has no surface of its
   own but the room it stands in. */
:root,
.room,
.site-foot {
	--yeti-color-surface: var(--ground);
	--yeti-color-surface-raised: color-mix(in oklch, var(--ink) 6%, var(--ground));
	--yeti-color-surface-sunken: color-mix(in oklch, var(--ink) 10%, var(--ground));
	--yeti-color-text: var(--ink);
	--yeti-color-text-muted: color-mix(in oklch, var(--ink) 74%, var(--ground));
	--yeti-color-border: color-mix(in oklch, var(--ink) 34%, var(--ground));
	--yeti-color-border-strong: color-mix(in oklch, var(--ink) 70%, var(--ground));
	--yeti-color-primary: var(--ink);
	--yeti-color-primary-strong: color-mix(in oklch, var(--ink) 82%, var(--ground));
	--yeti-color-primary-text: var(--ink);
	--yeti-color-primary-subtle: color-mix(in oklch, var(--ink) 10%, var(--ground));
	--yeti-color-primary-soft: color-mix(in oklch, var(--ink) 24%, var(--ground));
	--yeti-on-primary: var(--ground);
	--yeti-color-focus: var(--ink);
	--yeti-link-color: var(--ink);
	--yeti-link-color-hover: var(--ink);
	--yeti-nav-surface: var(--ground);
	--yeti-nav-panel: var(--ground);
	--yeti-nav-link: var(--ink);
	--yeti-control-border: var(--yeti-color-border-strong);
	--yeti-table-border: var(--yeti-color-border);
}

/* Element rules, in the theme layer: below layouts and components, so they
   never reach a component's own parts. */
@layer yeti.theme {
	/* The rooms decide the colour; the browser's own parts follow the ink. */
	html {
		color-scheme: light dark;
		background-color: var(--ground);
		color: var(--ink);
		accent-color: var(--ink);
		scrollbar-color: color-mix(in oklch, var(--ink) 45%, var(--ground)) var(--ground);
	}

	h1,
	h2,
	h3 {
		font-weight: 250;
		text-wrap: balance;
	}

	::selection {
		background-color: var(--ink);
		color: var(--ground);
	}
}