/* dvlopcore tokens: the named values every component stylesheet reads (docs/architecture/css-architecture.md,
   section 2). Each token is declared once, here, and named by its role, never by how it is drawn. A site
   gives tokens other values in its css/site.css; it never restyles a component. The four cascade layers
   are declared here because this file is linked first. */
@layer tokens, base, components, site;

@layer tokens {
	:root {
		/* Text */
		--font-family: Verdana, sans-serif;
		--font-line-height: 1.5;
		--font-size-body: 1rem;
		--font-size-control: 16pt;    /* the items of the main menu */
		--font-size-small: 0.9rem;    /* the chips in the header corner */
		--font-size-footer: 1em;      /* the footer's text (components/footer) */

		/* Page */
		--color-text: #000;
		--color-background: #fff;
		--color-link: #00e;
		--color-link-visited: #551a8b;
		--page-width: 20cm;
		--content-padding: 10%;

		/* Surfaces: a list that drops down, a notice */
		--color-surface: #fff;
		--color-border: #333;

		/* The button variants (components/button): the colour of the action and the text on it.
		   primary: the main menu and the chips; secondary: the links in a dropped-down list. */
		--color-primary: yellow;
		--color-on-primary: blue;
		--color-primary-hover: mediumblue;
		--color-on-primary-hover: #fff;
		--color-secondary: #fff;
		--color-on-secondary: #000;
		--color-secondary-hover: mediumblue;
		--color-on-secondary-hover: #fff;
		--color-accent: mediumblue;       /* also the bar before the current item of a list */
		--color-on-accent: #fff;
		--color-success: #1a7f37;
		--color-on-success: #fff;
		--color-danger: #b3261e;          /* also the bar before an alert */
		--color-on-danger: #fff;

		/* The disclosure (components/disclosure: the language picker and the share menu): its chip, the
		   panel that drops down and the items in it. The defaults are the button variants (the chip a
		   primary button, the items secondary buttons), so a site that sets --color-primary colours them
		   too; a site that wants the picker and the share menu in colours of their own, apart from the
		   menu, sets these (docs/architecture/css-architecture.md, section 2). Keep text on its
		   background at 4.5:1 and a border on its background at 3:1. */
		--disclosure-chip-color: var(--color-on-primary);
		--disclosure-chip-background: var(--color-primary);
		--disclosure-chip-border: var(--color-on-primary);
		--disclosure-chip-hover-color: var(--color-on-primary-hover);
		--disclosure-chip-hover-background: var(--color-primary-hover);
		--disclosure-chip-hover-border: var(--color-on-primary-hover);
		--disclosure-panel-background: var(--color-surface);
		--disclosure-panel-border: var(--color-border);
		--disclosure-item-color: var(--color-on-secondary);
		--disclosure-item-background: var(--color-secondary);
		--disclosure-item-hover-color: var(--color-on-secondary-hover);
		--disclosure-item-hover-background: var(--color-secondary-hover);
		--disclosure-item-current-marker: var(--color-accent);   /* the bar before the current item */

		/* Keyboard focus: a dark box with light text plus an outline, on every background. */
		--color-focus-text: #fff;
		--color-focus-background: #000;
		--color-focus-outline: #000;
		--focus-outline-width: 3px;
		--focus-outline-offset: 2px;

		/* Spacing and shape */
		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 1rem;
		--touch-target: 2.75rem;          /* at least 44 by 44 CSS pixels for every interactive part */
		--radius-pill: 1em;               /* a chip */
		--radius-panel: 0.3em;            /* a list that drops down */
		--shadow-panel: 0 0.25em 0.75em rgb(0 0 0 / 0.3);
		--motion-duration: 0.15s;         /* the chevron; 0s with prefers-reduced-motion */

		/* Site header (components/site-header): an image or colour in a 4:1 band, the site name. */
		--header-image: none;
		--header-position: center;
		--header-background: #333;
		--header-ratio: 4 / 1;
		--site-name-color: #fff;
		--site-name-size: 3em;
		--site-name-margin: 0.5em 0;
		--site-name-shadow: 0 0 0.2em #000;

		/* Images in markdown pages float at the end of the text (css/base.css). */
		--image-width: 48%;

		/* Tree (components/tree): the row height, the indent per level and the gap between chevron and
		   text, each with a compact value (variant compact); the guide lines and the row colours derive
		   from the page's colour tokens, so a site with dark token values gets a dark tree. */
		--tree-row-height: 2.75rem;         /* comfortable: a 44 px touch target per row */
		--tree-row-height-compact: 2rem;
		--tree-indent: 1.5rem;
		--tree-indent-compact: 1.1rem;
		--tree-gap: 0.5rem;
		--tree-gap-compact: 0.3rem;
		--tree-guide: color-mix(in srgb, var(--color-text) 30%, var(--color-background));
		--tree-hover-background: color-mix(in srgb, var(--color-accent) 12%, var(--color-background));
		--tree-selected-background: color-mix(in srgb, var(--color-accent) 22%, var(--color-background));
	}

	@media (width < 768px) {
		:root {
			--page-width: 98%;
			--site-name-size: 1.25em;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		:root {
			--motion-duration: 0s;
		}
	}
}