/* Fellwatch: a weather station's data logger panel, as a Yeti theme. Light
   powder-coated grey steel, a paler aluminium for the nameplate and the
   field wells, slate for every letter, rule and control; amber only for a
   channel that is on and for focus, red only for a fault or a destructive
   action. No bevels, no screws, no textures, no shadows. */

/* 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 panel for a form: a plain base, a calm ratio. */
	--yeti-base-min: 1rem;
	--yeti-base-max: 1.0625rem;
	--yeti-ratio-min: 1.2;
	--yeti-ratio-max: 1.28;

	/* One technical grotesque with a width axis: stamped condensed capitals
	   for plates and tapes, the text at full width. */
	--yeti-font-sans: "Encode Sans", system-ui, sans-serif;
	--yeti-stretch-text: 100%;
	--yeti-stretch-heading: 78%;
	--yeti-stretch-small: 85%;
	--yeti-tracking-heading: 0.08em;
	--yeti-weight-normal: 400;
	--yeti-weight-strong: 600;
	--yeti-weight-bold: 700;
	--yeti-button-weight: 600;

	/* Hues: slate for the primary, amber for "on", red for a fault. */
	--yeti-hue-primary: 230;
	--yeti-hue-neutral: 120;
	--yeti-hue-warning: 70;
	--yeti-hue-alert: 28;
	--yeti-chroma: 0.12;

	/* The steel, the aluminium, and a well. */
	--yeti-color-surface: oklch(0.86 0.006 120);
	--yeti-color-surface-raised: oklch(0.945 0.004 100);
	--yeti-color-surface-sunken: oklch(0.80 0.007 120);

	/* Slate lettering and rules. */
	--yeti-color-text: oklch(0.27 0.02 235);
	--yeti-color-text-muted: oklch(0.43 0.02 235);
	--yeti-color-border: oklch(0.58 0.015 230);
	--yeti-color-border-strong: oklch(0.36 0.02 235);

	/* The primary is the slate: controls are slate plates with pale lettering,
	   links are slate and underlined. */
	--yeti-color-primary: oklch(0.34 0.03 235);
	--yeti-color-primary-strong: oklch(0.26 0.03 235);
	--yeti-color-primary-text: oklch(0.30 0.03 235);
	--yeti-color-primary-subtle: oklch(0.90 0.012 230);
	--yeti-color-primary-soft: oklch(0.80 0.02 230);
	--yeti-on-primary: oklch(0.97 0.004 100);
	--yeti-link-color: var(--yeti-color-primary-text);
	--yeti-link-color-hover: var(--yeti-color-primary-strong);

	/* Amber: a channel that is on, and focus. */
	--yeti-color-warning: oklch(0.76 0.16 70);
	--yeti-color-warning-text: oklch(0.45 0.11 60);
	--yeti-color-warning-subtle: oklch(0.93 0.05 80);
	--yeti-color-focus: oklch(0.70 0.16 65);

	/* Red: a fault, and a destructive action. */
	--yeti-color-alert: oklch(0.52 0.17 28);
	--yeti-color-alert-strong: oklch(0.45 0.17 28);
	--yeti-color-alert-text: oklch(0.45 0.15 28);
	--yeti-color-alert-subtle: oklch(0.93 0.035 28);

	/* Small radii, one thin rule, no shadows. */
	--yeti-radius-sm: 3px;
	--yeti-radius-md: 4px;
	--yeti-radius-lg: 6px;
	--yeti-button-radius: var(--yeti-radius-sm);
	--yeti-badge-radius: 2px;
	--yeti-card-radius: var(--yeti-radius-lg);
	--yeti-control-radius: var(--yeti-radius-sm);
	--yeti-nav-radius: var(--yeti-radius-sm);
	--yeti-shadow-sm: none;
	--yeti-shadow-md: none;
	--yeti-border-width: 1px;
	--yeti-card-border: var(--yeti-color-border);
	--yeti-card-surface: var(--yeti-color-surface-raised);
	--yeti-control-border: var(--yeti-color-border-strong);
	--yeti-control-surface: var(--yeti-color-surface-raised);
	/* A switch that is off is a grey track with a pale thumb, so it never
	   reads as the slate of one that is on. */
	--yeti-switch-track: var(--yeti-color-border);
	--yeti-switch-thumb: var(--yeti-color-surface-raised);
	--yeti-table-border: var(--yeti-color-border);
	--yeti-table-stripe: var(--yeti-color-surface);

	/* The top bar: the steel, a slate rule, the brand stamped. */
	--yeti-nav-surface: var(--yeti-color-surface-sunken);
	--yeti-nav-border: var(--yeti-color-border-strong);
	--yeti-nav-panel: var(--yeti-color-surface-raised);
	--yeti-nav-link: var(--yeti-color-text);
	--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 {
	/* A panel in daylight, whatever the visitor's setting. */
	html {
		color-scheme: light;
	}

	/* Stamped lettering is capitals. */
	h1,
	h2,
	h3 {
		text-transform: uppercase;
	}

	/* A key or a code in the panel is stamped into the steel, in the well
	   the gauges sit in, not raised on the paler aluminium. */
	code,
	kbd,
	samp {
		background-color: var(--yeti-color-surface-sunken);
		color: var(--yeti-color-text);
	}

	::selection {
		background-color: var(--yeti-color-warning-subtle);
		color: var(--yeti-color-text);
	}
}