/* Light and dark. The house picks one on /settings (House::COLOR_SCHEMES), and the layout writes it
   on <html data-color-scheme='system|light|dark'>. Visitors who are not logged in, and new houses,
   get House::DEFAULT_COLOR_SCHEME (dark).

   How it works: each color that differs between the two is written once below, as
   light-dark(light value, dark value). The browser picks one by the element's `color-scheme`, which
   is set here from the attribute - and 'system' sets "light dark", which means "whichever the
   browser prefers", so it needs no media query of its own.

   Every other stylesheet uses these tokens and never knows which scheme is on. The dark values are
   the site as it was before light existed - change one and dark changes with it. Colors that are the
   same in both (parchment, ink, the textures) stay in main.css.

   Gotcha: light-dark() only takes colors. A texture or a whole gradient cannot be swapped by it -
   build the gradient out of light-dark() colors instead, like the panel background below. */

:root
{
	color-scheme: dark;

	&[data-color-scheme='light'] { color-scheme: light; }
	&[data-color-scheme='system'] { color-scheme: light dark; }

	/* The page behind everything. */
	--color-background: light-dark(#f4efe6, #0b0608);

	/* The gold family is the text and its lines. In light it turns to dark bronze: gold on white
	   cannot be read. The 'gold' names stay so nothing else had to be renamed. */
	--color-gold: light-dark(rgb(92 66 22), rgb(231, 205, 140));
	--color-gold-shaded: light-dark(rgb(128 100 50), rgb(178, 156, 96));
	--color-gold-faint: light-dark(rgb(92 66 22 / .7), rgb(247 230 180 / .38));
	--color-gold-muted: light-dark(rgb(150 115 40 / .5), rgb(201 164 76 / .40));
	--color-gold-line: light-dark(rgb(150 115 40 / .3), rgb(201 164 76 / .24));
	--color-gold-dark: light-dark(rgb(201 170 110), rgb(73, 57, 29));

	--color-error: light-dark(#b0301f, #cb4433);

	/* A .panel: dark stone, or in light a sheet of paper. Shade is the darkening toward its bottom,
	   hollow the darkening in from its edges. */
	--color-panel: light-dark(#fffdf8, #17131a);
	--color-panel-shade: light-dark(rgb(90 65 20 / .04), rgb(0 0 0 / .25));
	--color-panel-hollow: light-dark(rgb(90 65 20 / .05), rgb(0 0 0 / .45));

	/* Laid over the panel's grain texture. The grain is black noise: a faint roughness on dark stone,
	   but grey concrete on white. A texture cannot be swapped by light-dark(), so in light it is
	   mostly covered instead - enough shows through to read as paper. Nothing in dark. */
	--color-panel-veil: light-dark(rgb(255 253 248 / .9), transparent);

	/* The thin outline around a panel or a field, and the shadow a panel casts on the page. */
	--color-edge: light-dark(rgb(150 115 40 / .35), #000);
	--color-drop-shadow: light-dark(rgb(90 65 20 / .15), rgb(0 0 0 / .55));

	/* Sunken into the panel: text fields, the picker's box, a progress bar's track. */
	--color-sunken: light-dark(#fff, rgb(0 0 0 / .45));
	--color-sunken-shade: light-dark(rgb(90 65 20 / .12), rgb(0 0 0 / .8));

	/* An empty slot. In light not dark stone but a faint hollow in the paper - see the empty slot
	   rule at the bottom. */
	--color-tile-empty: light-dark(rgb(90 65 20 / .07), #0d0a0e);
}


/* Things that stay dark in both schemes. They are objects drawn on the page rather than the page
   itself: leather (the top bar, buttons), and the tiles that hold spells and portraits - spell colors
   are picked to glow on dark stone, and many vanish on white. Setting their color-scheme makes every
   token above take its dark value inside them, so they need nothing else.

   A lighter stone for the tiles in light was tried - a gray slate, then a walnut - and both looked
   blanched next to the dark ones. Filled tiles are dark stone in both schemes on purpose. */
header,
main button,
main .button,
.slot__tile,
.portrait-frame,
.spell-tile,
.spell-glyph,
.picker__option,
.spell-editor__overlay
{
	color-scheme: dark;
}

/* Except an empty slot: it holds no spell, only its key and a +, so in light it can be part of the
   page - a hollow in the paper, outlined and marked in bronze - and leave the stone to the filled
   slots. A wall of empty stone tiles drowned out the few spells in a grimoire. Back to the page's
   scheme, so its + and key take the page's colors. The oath picker's "Forswear" tile is one too. */
.slot--empty .slot__tile,
.oath--empty .oath__tile
{
	color-scheme: inherit;
}

/* Gotcha: an inherited color arrives already resolved, in the parent's scheme - the body's bronze,
   in light. The top bar's text (the house name) sets no color of its own, so it is set again here to
   be resolved in the top bar's dark. Buttons and tiles set their own already. */
header
{
	color: var(--color-gold);
}