/* Summit: the walker's map sheet, as Yeti tokens. Values only, on :root,
   loaded after yeti.css. Cover orange on the band and the one action, cream
   map paper, contour brown for every rule, footpath green for the route and
   the links, ink for text. Square corners, one line weight, 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 {
	/* The scale: the same fluid base, a slightly wider ratio at the top end so
	   the title block opens up on a wide sheet. */
	--yeti-ratio-max: 1.4;

	/* One family, self-hosted, with a width axis: the text at its full width,
	   the headings too; the sheet's small labels set narrow in page.css. */
	--yeti-font-sans: "Bricolage Grotesque", system-ui, sans-serif;
	--yeti-stretch-text: 100%;
	--yeti-stretch-heading: 100%;
	--yeti-stretch-small: 85%;
	--yeti-tracking-heading: -0.03em;
	--yeti-weight-bold: 800;
	--yeti-weight-strong: 600;
	--yeti-button-weight: 700;

	/* Hues: cover orange, footpath green, warm paper. */
	--yeti-hue-primary: 60;
	--yeti-hue-secondary: 60;
	--yeti-hue-success: 148;
	--yeti-hue-neutral: 80;
	--yeti-chroma: 0.16;

	/* The cover orange, pinned: Yeti's base step sits too dark for a cover,
	   so the base and its neighbours are named outright. Text on it is ink. */
	--yeti-color-primary: oklch(0.74 0.165 60);
	--yeti-color-primary-strong: oklch(0.66 0.165 58);
	--yeti-color-primary-text: oklch(0.42 0.12 55);
	--yeti-color-primary-subtle: oklch(0.93 0.05 75);
	--yeti-color-primary-soft: oklch(0.86 0.10 68);
	--yeti-on-primary: oklch(0.17 0.02 60);

	/* The route green, the same way. */
	--yeti-color-success: oklch(0.55 0.14 148);
	--yeti-color-success-strong: oklch(0.47 0.14 148);
	--yeti-color-success-text: oklch(0.38 0.11 148);
	--yeti-color-success-subtle: oklch(0.93 0.05 148);
	--yeti-color-success-soft: oklch(0.85 0.09 148);
	--yeti-color-focus: oklch(0.45 0.13 148);

	/* Links are footpath green, the route's colour; the cover orange is too
	   light on paper for text. */
	--yeti-link-color: var(--yeti-color-success-text);
	--yeti-link-color-hover: var(--yeti-color-success-strong);

	/* The paper, the ink, and the contour brown. */
	--yeti-color-surface: oklch(0.955 0.024 85);
	--yeti-color-surface-raised: oklch(0.975 0.014 85);
	--yeti-color-surface-sunken: oklch(0.92 0.03 82);
	--yeti-color-text: oklch(0.20 0.015 60);
	--yeti-color-text-muted: oklch(0.44 0.05 55);
	--yeti-color-border: oklch(0.64 0.10 55);
	--yeti-color-border-strong: oklch(0.50 0.10 55);

	/* A sheet has no corners and casts no shadow: the map, the panels, the
	   band and the badges stay square. The controls are the screen's, not
	   the sheet's, and take a 3px finish so a button reads as pressable. */
	--yeti-radius-sm: 3px;
	--yeti-radius-md: 0;
	--yeti-radius-lg: 0;
	--yeti-button-radius: var(--yeti-radius-sm);
	--yeti-badge-radius: 0;
	--yeti-card-radius: 0;
	--yeti-control-radius: var(--yeti-radius-sm);
	--yeti-nav-radius: var(--yeti-radius-sm);
	--yeti-shadow-sm: none;
	--yeti-shadow-md: none;
	--yeti-lift-distance: 0;
	--yeti-lift-shadow: none;

	/* One line weight, in the contour brown, on everything that draws one. */
	--yeti-border-width: 1px;
	--yeti-card-border: var(--yeti-color-border);
	--yeti-card-surface: var(--yeti-color-surface);
	--yeti-card-padding: var(--yeti-space-lg);
	--yeti-control-border: var(--yeti-color-border);
	--yeti-table-border: var(--yeti-color-border);
	--yeti-accordion-border: var(--yeti-color-border);
	--yeti-accordion-surface: var(--yeti-color-surface);
	--yeti-accordion-summary: var(--yeti-color-surface);
	--yeti-accordion-summary-hover: var(--yeti-color-surface-sunken);
	--yeti-accordion-padding: var(--yeti-space-md);

	/* The cover band: the bar is the orange itself, its edge drawn in ink, the
	   links in ink, and the brand a wordmark a step larger than the links. */
	--yeti-nav-surface: var(--yeti-color-primary);
	--yeti-nav-border: var(--yeti-color-text);
	--yeti-nav-panel: var(--yeti-color-surface);
	--yeti-nav-link: var(--yeti-color-text);
	--yeti-nav-brand-weight: var(--yeti-weight-bold);
	--yeti-nav-brand-size: var(--yeti-text-lg);

	/* The lede sits close under the title and keeps a short line. */
	--yeti-lede-size: var(--yeti-text-lg);
	--yeti-lede-measure: 42ch;

	/* One beat: every arrival shares the route's curve and a calm pace. */
	--yeti-enter-duration: 700ms;
	--yeti-enter-distance: 1.5rem;
	--yeti-enter-stagger: 150ms;
}

/* 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: light;
	}

	/* The quotation's bar at the page's one line weight. */
	blockquote {
		border-inline-start: var(--yeti-border-width) solid var(--yeti-color-border);
	}
}