/*
 * aard.shows.css: theme for shows.theaardvark.co.uk. Load after aard.css.
 * Variable layer plus fonts. House palette from the aardvark DJ character (design guide).
 * Every text and background pair in here is checked by scripts/contrast.php: run it after any change.
 * Strand colours are not here: they live in data/strands.yaml.
 */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root, ::backdrop {
	--aard-font-family: "Figtree", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--aard-font-heading: "Fraunces", Georgia, "Times New Roman", serif;

	/* Surfaces: midnight in dark, warm paper in light. */
	--aard-background-color: light-dark(#FBF5E8, #0D112A);
	--aard-color: light-dark(#080207, #F4F2FB);
	--aard-muted-color: light-dark(#594A56, #B4B9D6);
	--aard-muted-border-color: light-dark(#DDD2BF, #2C3263);
	--aard-h1-color: var(--aard-color);
	--aard-h2-color: var(--aard-color);
	--aard-h3-color: var(--aard-color);
	--aard-h4-color: var(--aard-color);
	--aard-h5-color: var(--aard-color);
	--aard-h6-color: var(--aard-color);
	--aard-card-background-color: light-dark(#FFFFFF, #1A1F45);
	--aard-card-border-color: var(--aard-muted-border-color);
	--aard-card-sectioning-background-color: light-dark(#F3EBD9, #141937);
	--aard-form-element-background-color: light-dark(#FFFFFF, #151A3B);
	--aard-form-element-border-color: light-dark(#8A7A86, #6A72A8);
	--aard-text-selection-color: light-dark(rgba(112, 28, 176, 0.25), rgba(252, 240, 0, 0.3));
	--aard-border-radius: 1rem;

	/* Primary: violet on paper, yellow on midnight. Also the link colour. */
	--aard-primary: light-dark(#701CB0, #FCF000);
	--aard-primary-background: light-dark(#EFE3FA, #2B2D07);
	--aard-primary-hover: light-dark(#440C60, #FFF65C);
	--aard-primary-hover-background: light-dark(#701CB0, #FCF000);
	--aard-primary-focus: light-dark(rgba(112, 28, 176, 0.5), rgba(252, 240, 0, 0.5));
	--aard-primary-inverse: light-dark(#FFFFFF, #080207);
	--aard-primary-underline: light-dark(rgba(112, 28, 176, 0.5), rgba(252, 240, 0, 0.5));

	/* Secondary: house magenta. */
	--aard-secondary: light-dark(#B5006F, #EC008C);
	--aard-secondary-background: light-dark(#FCE3F1, #200515);
	--aard-secondary-hover: light-dark(#8C0055, #F466B4);
	--aard-secondary-hover-background: light-dark(#B5006F, #EC008C);
	--aard-secondary-focus: light-dark(rgba(181, 0, 111, 0.5), rgba(236, 0, 140, 0.5));
	--aard-secondary-inverse: light-dark(#FFFFFF, #080207);
	--aard-secondary-underline: light-dark(rgba(181, 0, 111, 0.5), rgba(236, 0, 140, 0.5));

	/* Tertiary: headphone teal. */
	--aard-tertiary: light-dark(#0B6B67, #78CCC8);
	--aard-tertiary-background: light-dark(#DDF3F1, #0E2F2E);
	--aard-tertiary-hover: light-dark(#064C49, #A5E0DD);
	--aard-tertiary-hover-background: light-dark(#0B6B67, #78CCC8);
	--aard-tertiary-focus: light-dark(rgba(11, 107, 103, 0.5), rgba(120, 204, 200, 0.5));
	--aard-tertiary-inverse: light-dark(#FFFFFF, #080207);
	--aard-tertiary-underline: light-dark(rgba(11, 107, 103, 0.5), rgba(120, 204, 200, 0.5));

	/* Accent: the character's yellow outline. Fill only; never as text on paper. */
	--aard-accent: #FCF000;
	--aard-accent-background: light-dark(#FFFBB8, #2B2D07);
	--aard-accent-hover: #FFF65C;
	--aard-accent-hover-background: #FCF000;
	--aard-accent-focus: light-dark(rgba(112, 28, 176, 0.5), rgba(252, 240, 0, 0.5));
	--aard-accent-inverse: #080207;
	--aard-accent-underline: rgba(252, 240, 0, 0.5);

	/* Contrast: ink on paper, paper on midnight. */
	--aard-contrast: light-dark(#080207, #F4F2FB);
	--aard-contrast-hover: light-dark(#3A2C37, #FFFFFF);
	--aard-contrast-inverse: light-dark(#FFFFFF, #080207);

	/* Focus ring for the site's own controls. */
	--shows-focus: light-dark(#701CB0, #FCF000);
}

/* Heading and body fonts: scale the fallback to the web font's x-height so the swap does not shift the layout. */
body, h1, h2, h3, h4, h5, h6 { font-size-adjust: from-font; }
h1, h2, h3, h4, h5, h6, .wordmark { font-family: var(--aard-font-heading); font-weight: 900; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}