/* The Pocket Fells: a hand-drawn walker's guide, as Yeti tokens. Values
   only, on :root, loaded after yeti.css. White book paper, black pen ink,
   pencil grey for the small things, one red pencil mark. Nothing has an
   edge, a fill or a shadow; the only lines are the ones a pen draws. */

/* 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: a book measure wants a slightly larger base and a calmer
	   ratio than a landing page; the title is lettered, not shouted. */
	--yeti-base-min: 1.0625rem;
	--yeti-base-max: 1.1875rem;
	--yeti-ratio-max: 1.3;

	/* One lettering hand for everything, self-hosted: light for the text,
	   heavy for the title. */
	--yeti-font-sans: "Shantell Sans", system-ui, sans-serif;
	--yeti-weight-normal: 350;
	--yeti-weight-strong: 600;
	--yeti-weight-bold: 700;
	--yeti-leading-md: 1.55;
	--yeti-tracking-heading: -0.02em;
	--yeti-measure: 62ch;
	--yeti-lede-size: var(--yeti-text-lg);
	--yeti-lede-measure: 46ch;

	/* Hues: the only colour is the red pencil, carried by the alert ladder,
	   which the contents list reads for its current mark. */
	--yeti-hue-primary: 60;
	--yeti-hue-alert: 30;
	--yeti-hue-neutral: 70;
	--yeti-chroma: 0.02;

	/* Paper, ink and pencil, pinned. */
	--yeti-color-surface: oklch(0.985 0.004 90);
	--yeti-color-surface-raised: oklch(0.985 0.004 90);
	--yeti-color-surface-sunken: oklch(0.955 0.006 90);
	--yeti-color-text: oklch(0.22 0.01 60);
	--yeti-color-text-muted: oklch(0.50 0.012 60);
	--yeti-color-border: oklch(0.22 0.01 60);
	--yeti-color-border-strong: oklch(0.22 0.01 60);

	/* The ink as the primary: links are underlined ink, not a colour. */
	--yeti-color-primary: oklch(0.22 0.01 60);
	--yeti-color-primary-strong: oklch(0.12 0.01 60);
	--yeti-color-primary-text: oklch(0.22 0.01 60);
	--yeti-color-primary-subtle: oklch(0.955 0.006 90);
	--yeti-color-primary-soft: oklch(0.90 0.01 90);
	--yeti-on-primary: oklch(0.985 0.004 90);
	--yeti-link-color: var(--yeti-color-text);
	--yeti-link-color-hover: var(--yeti-color-alert);

	/* The red pencil. */
	--yeti-color-alert: oklch(0.55 0.19 30);
	--yeti-color-alert-strong: oklch(0.48 0.19 30);
	--yeti-color-alert-text: oklch(0.45 0.17 30);
	--yeti-color-alert-subtle: oklch(0.96 0.03 30);
	--yeti-color-alert-soft: oklch(0.90 0.07 30);
	--yeti-color-focus: oklch(0.55 0.19 30);

	/* Nothing has an edge. */
	--yeti-radius-sm: 0;
	--yeti-radius-md: 0;
	--yeti-radius-lg: 0;
	--yeti-button-radius: 0;
	--yeti-badge-radius: 0;
	--yeti-card-radius: 0;
	--yeti-control-radius: 0;
	--yeti-nav-radius: 0;
	--yeti-progress-radius: 0;
	--yeti-shadow-sm: none;
	--yeti-shadow-md: none;

	/* The pen's line weight, wherever a component draws one. */
	--yeti-border-width: 1px;

	/* The running head: paper, a pen rule beneath, the book's name lettered
	   heavy and a step larger than the links, the links in ink. */
	--yeti-nav-surface: var(--yeti-color-surface);
	--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);
	--yeti-nav-padding: var(--yeti-space-sm) 0;

	/* The contents list follows the heading being read, with no tinted hover
	   fill, only an underline; the page scrolls to a section smoothly, as a
	   hand turns a page. */
	--yeti-toc-scroll: smooth;
	--yeti-toc-hover: transparent;
	--yeti-toc-padding: 0.2em;
}

/* 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-text);
	}
}