/* The five colours of the brand (docs/brand/README.md, D92), named, and the part each one plays. This is the ONE place the five values are written in this app: every other
   stylesheet, page and email reads the names below (a test fails when a value is typed anywhere else). The roles are the second block: change a role here, nowhere else. */
:root {
	--rylix-midnight: #090B24;     /* Midnight: the text colour */
	--rylix-indigo: #2100B8;       /* Rylix Indigo: headings, and the background of the main button */
	--rylix-violet: #4234DC;       /* Electric Violet: links, the focus ring, the main button when pointed at */
	--rylix-periwinkle: #CED5FF;   /* Soft Periwinkle: soft surfaces (the address box, rules between parts) */
	--rylix-cloud: #F8F8F5;        /* Cloud: the page background, and the text on the main button */
}

/* The roles. Contrast of each text/background pair is checked against WCAG AA by tests/test_identity.py (the ratios are in work/t162/RESULT.md). */
:root {
	--rylix-page: var(--rylix-cloud);
	--rylix-text: var(--rylix-midnight);
	--rylix-text-muted: var(--rylix-midnight);
	--rylix-heading: var(--rylix-indigo);
	--rylix-link: var(--rylix-violet);
	--rylix-button: var(--rylix-indigo);
	--rylix-button-hover: var(--rylix-violet);
	--rylix-button-text: var(--rylix-cloud);
	--rylix-soft: var(--rylix-periwinkle);
	--rylix-soft-text: var(--rylix-midnight);
	--rylix-focus: var(--rylix-violet);
	--rylix-field: #FFFFFF;
	--rylix-field-text: var(--rylix-midnight);
	--rylix-field-line: var(--rylix-midnight);
}

/* The muted text and the field's line are Midnight softened towards Cloud (72 per cent and 60 per cent); a browser that does not know color-mix keeps full Midnight, which is only darker. */
@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--rylix-text-muted: color-mix(in srgb, var(--rylix-midnight) 72%, var(--rylix-cloud));
		--rylix-field-line: color-mix(in srgb, var(--rylix-midnight) 60%, var(--rylix-cloud));
	}
}