/* Beckside Buses control: a signal box's mimic panel, as Yeti tokens. Values
   only, on :root, loaded after yeti.css. A dark enamelled panel, cream enamel
   for every letter and line, and three lamp colours that mean only state:
   green running, amber late, red cancelled. Nothing else is coloured. */

/* 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;

:root {
	/* A dense board: a smaller base and a flatter ratio than a reading page. */
	--yeti-base-min: 0.9375rem;
	--yeti-base-max: 1rem;
	--yeti-ratio-min: 1.18;
	--yeti-ratio-max: 1.25;

	/* One family with a width axis: engraved plates condensed, data at full
	   width, headings condensed and spaced like lettering on enamel. */
	--yeti-font-sans: "Archivo", system-ui, sans-serif;
	--yeti-stretch-text: 100%;
	--yeti-stretch-heading: 72%;
	--yeti-stretch-small: 82%;
	--yeti-tracking-heading: 0.06em;
	--yeti-weight-normal: 400;
	--yeti-weight-strong: 600;
	--yeti-weight-bold: 700;
	--yeti-button-weight: 700;
	--yeti-leading-md: 1.45;

	/* Hues for the three lamps; the rest of the palette is pinned below. */
	--yeti-hue-primary: 90;
	--yeti-hue-neutral: 150;
	--yeti-hue-success: 145;
	--yeti-hue-warning: 80;
	--yeti-hue-alert: 28;
	--yeti-chroma: 0.16;

	/* The enamel: the panel, the lever frame's lighter plate, a well. */
	--yeti-color-surface: oklch(0.27 0.014 155);
	--yeti-color-surface-raised: oklch(0.31 0.014 155);
	--yeti-color-surface-sunken: oklch(0.23 0.014 155);

	/* Cream enamel lettering, and a softer cream for the small plates. */
	--yeti-color-text: oklch(0.93 0.03 90);
	--yeti-color-text-muted: oklch(0.76 0.025 90);
	--yeti-color-border: oklch(0.52 0.02 110);
	--yeti-color-border-strong: oklch(0.70 0.025 95);

	/* The primary is the cream itself: controls are cream plates with dark
	   lettering, links are cream and underlined, focus is a cream ring. */
	--yeti-color-primary: oklch(0.90 0.035 90);
	--yeti-color-primary-strong: oklch(0.97 0.02 90);
	--yeti-color-primary-text: oklch(0.93 0.03 90);
	--yeti-color-primary-subtle: oklch(0.36 0.016 140);
	--yeti-color-primary-soft: oklch(0.46 0.02 120);
	--yeti-on-primary: oklch(0.22 0.014 155);
	--yeti-color-focus: oklch(0.93 0.03 90);
	--yeti-link-color: var(--yeti-color-text);
	--yeti-link-color-hover: var(--yeti-color-primary-strong);

	/* The lamps, lit. Text on a lamp colour is the panel's dark. */
	--yeti-color-success: oklch(0.78 0.17 145);
	--yeti-color-success-text: oklch(0.84 0.14 145);
	--yeti-color-success-subtle: oklch(0.34 0.06 145);
	--yeti-color-warning: oklch(0.83 0.16 80);
	--yeti-color-warning-text: oklch(0.88 0.13 85);
	--yeti-color-warning-subtle: oklch(0.36 0.06 80);
	--yeti-color-alert: oklch(0.66 0.21 28);
	--yeti-color-alert-text: oklch(0.76 0.16 28);
	--yeti-color-alert-subtle: oklch(0.34 0.08 28);

	/* Enamel plates: gently rounded like a sign, no shadows. */
	--yeti-radius-sm: 3px;
	--yeti-radius-md: 5px;
	--yeti-radius-lg: 5px;
	--yeti-button-radius: var(--yeti-radius-sm);
	--yeti-badge-radius: var(--yeti-radius-sm);
	--yeti-card-radius: var(--yeti-radius-md);
	--yeti-control-radius: var(--yeti-radius-sm);
	--yeti-nav-radius: var(--yeti-radius-sm);
	--yeti-shadow-sm: none;
	--yeti-shadow-md: none;

	/* One thin rule on every plate. */
	--yeti-border-width: 1px;
	--yeti-alert-edge: var(--yeti-border-width);
	--yeti-card-border: var(--yeti-color-border);
	--yeti-card-surface: var(--yeti-color-surface-raised);
	--yeti-table-border: var(--yeti-color-border);
	--yeti-table-stripe: var(--yeti-color-surface-raised);

	/* The top plate: a darker strip, cream lettering, the brand engraved. */
	--yeti-nav-surface: var(--yeti-color-surface-sunken);
	--yeti-nav-border: var(--yeti-color-border);
	--yeti-nav-panel: var(--yeti-color-surface-raised);
	--yeti-nav-link: var(--yeti-color-text-muted);
	--yeti-nav-brand-weight: var(--yeti-weight-bold);
	--yeti-nav-brand-size: var(--yeti-text-lg);
}

/* Element rules, in the theme layer: below layouts and components, so they
   never reach a component's own parts. */
@layer yeti.theme {
	html {
		color-scheme: dark;
	}

	/* Engraved lettering is capitals (GAP-037). */
	h1,
	h2,
	h3 {
		text-transform: uppercase;
	}
}