/**
 * Edible — palette and colour schemes.
 *
 * Every section carries one .scheme-* class. The class sets six custom properties, so
 * any element inside it recolours automatically:
 *
 *     --scheme-bg          section background
 *     --scheme-text        body text
 *     --scheme-accent      secondary text, captions, links in lists
 *     --scheme-solid-bg    inverted fill (buttons, hover states)
 *     --scheme-solid-text  text on that inverted fill
 *     --scheme-opacity     35% of the text colour, for de-emphasised meta
 *
 * To retheme a section, change one class in its template part. To retheme the whole
 * site, change the --color-* values below.
 *
 * @package Edible
 */

:root {
	--color-black: #000;
	--color-white: #fff;
	--color-off-white: #f0f0f0;
	--color-grey: #959595;
	--color-middle-grey: #595959;
	--color-light-grey: #dcdcdc;
	--color-dark-grey: #343434;

	/* Edible accents. The mark is pure black on white, so the accents carry all the
	   warmth. Change these three lines to reskin the newsletter and About sections. */
	--color-saffron: #f2c230;
	--color-dark-saffron: #4a3a07;
	--color-terracotta: #c4735a;

	--color-orange: #ff4d00;
	--color-blue: #39f;
	--color-pink: #f6c;

	/* The mint/cobalt family — four colours designed as one set: two grounds (ice,
	   midnight) and two brights (mint, cobalt). Their schemes pair them with each
	   other rather than with the grey ramp, so a mint section answers in cobalt and
	   a midnight one in mint. */
	--color-mint: #bbf9b4;
	--color-cobalt: #2b38c5;
	--color-ice: #fdfdfe;
	--color-midnight: #15172e;
}

/* -----------------------------------------------------------------------------
   Schemes
   -------------------------------------------------------------------------- */

.scheme-white {
	--scheme-bg: var(--color-white);
	--scheme-text: var(--color-black);
	--scheme-accent: var(--color-middle-grey);
	--scheme-solid-bg: var(--color-black);
	--scheme-solid-text: var(--color-white);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

/* The fullscreen menu panel is black, and it is core Navigation markup — the class goes on
   the <nav> in the bar, not on the panel inside it, so the scheme cannot be applied there
   without painting a black box in the header. Naming the panel here rather than repeating
   the six declarations in home.css keeps one definition of what black means. */
.scheme-black,
.edible-theme .nav--fullscreen .wp-block-navigation__responsive-container {
	--scheme-bg: var(--color-black);
	--scheme-text: var(--color-white);
	--scheme-accent: var(--color-grey);
	--scheme-solid-bg: var(--color-white);
	--scheme-solid-text: var(--color-black);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

.scheme-grey {
	--scheme-bg: var(--color-light-grey);
	--scheme-text: var(--color-black);
	--scheme-accent: var(--color-middle-grey);
	--scheme-solid-bg: var(--color-black);
	--scheme-solid-text: var(--color-light-grey);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

.scheme-saffron {
	--scheme-bg: var(--color-saffron);
	--scheme-text: var(--color-black);
	--scheme-accent: var(--color-dark-saffron);
	--scheme-solid-bg: var(--color-black);
	--scheme-solid-text: var(--color-saffron);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

.scheme-terracotta {
	--scheme-bg: var(--color-terracotta);
	--scheme-text: var(--color-black);
	--scheme-accent: var(--color-black);
	--scheme-solid-bg: var(--color-black);
	--scheme-solid-text: var(--color-terracotta);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

.scheme-pink {
	--scheme-bg: var(--color-pink);
	--scheme-text: var(--color-black);
	--scheme-accent: var(--color-dark-grey);
	--scheme-solid-bg: var(--color-black);
	--scheme-solid-text: var(--color-pink);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

.scheme-blue {
	--scheme-bg: var(--color-blue);
	--scheme-text: var(--color-black);
	--scheme-accent: var(--color-dark-grey);
	--scheme-solid-bg: var(--color-black);
	--scheme-solid-text: var(--color-blue);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

/* The mint/cobalt family. Text and accent come from inside the set — midnight is the
   family's black and ice its white — so the four schemes read as one palette. Every
   pairing clears WCAG AA: the weakest, cobalt on mint, sits at 7:1. */

.scheme-mint {
	--scheme-bg: var(--color-mint);
	--scheme-text: var(--color-midnight);
	--scheme-accent: var(--color-cobalt);
	--scheme-solid-bg: var(--color-midnight);
	--scheme-solid-text: var(--color-mint);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

.scheme-cobalt {
	--scheme-bg: var(--color-cobalt);
	--scheme-text: var(--color-ice);
	--scheme-accent: var(--color-mint);
	--scheme-solid-bg: var(--color-ice);
	--scheme-solid-text: var(--color-cobalt);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

.scheme-ice {
	--scheme-bg: var(--color-ice);
	--scheme-text: var(--color-midnight);
	--scheme-accent: var(--color-cobalt);
	--scheme-solid-bg: var(--color-midnight);
	--scheme-solid-text: var(--color-ice);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

.scheme-midnight {
	--scheme-bg: var(--color-midnight);
	--scheme-text: var(--color-ice);
	--scheme-accent: var(--color-mint);
	--scheme-solid-bg: var(--color-ice);
	--scheme-solid-text: var(--color-midnight);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

/*
 * The scheme for a colour nobody designed.
 *
 * A programme Type can be set to any colour with the picker, not only the seven above, and
 * one hex can only ever answer the first two of the six properties. So this derives the
 * other four: the accent is the text pulled two thirds of the way back towards the
 * background, and the inverted fill is simply the pair swapped. Not as considered as the
 * schemes above — saffron's accent is a chosen dark saffron, not a mix — but coherent, and
 * it holds whatever colour it is given.
 *
 * The two it cannot derive arrive from a generated rule: edible_type_colour_css() writes
 * `.scheme-type-<slug>{--scheme-bg:…;--scheme-text:…}` per custom type, printed after this
 * file so it wins. The values below are what shows if that rule is ever missing — grey,
 * i.e. the same fallback a type with no colour at all gets, rather than a transparent pill.
 */
.scheme-custom {
	--scheme-bg: var(--color-light-grey);
	--scheme-text: var(--color-black);
	--scheme-accent: color-mix(in srgb, var(--scheme-text) 65%, var(--scheme-bg));
	--scheme-solid-bg: var(--scheme-text);
	--scheme-solid-text: var(--scheme-bg);
	--scheme-opacity: color-mix(in srgb, var(--scheme-text) 35%, transparent);

	background-color: var(--scheme-bg);
	color: var(--scheme-text);
}

/* -----------------------------------------------------------------------------
   Scheme-aware defaults
   -------------------------------------------------------------------------- */

[class*="scheme-"] a:not(.button) {
	color: inherit;
}

[class*="scheme-"] .wordmark path,
[class*="scheme-"] .wordmark polygon {
	fill: var(--scheme-text);
}

[class*="scheme-"] figcaption {
	color: var(--scheme-accent);
}