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

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

		/* The legacy language switcher (components/navbar, variant language). */
		--navbar-language-width: 20%;

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

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

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