/**
 * QueenCademy design-system colours (global).
 *
 * Source: the QueenCademy design system, project/tokens.json. Every colour in
 * the child theme's CSS should come from here — use var(--qc-color-…) rather
 * than a hex value. Loaded on the front end (before custom.css) and on the
 * login page; see functions.php and inc/login/qc-login.php.
 *
 * Roles, in short (the design system has the full rules):
 *   indigo        logo / big brand moments only — never buttons or menus
 *   violet        the one action colour: buttons, links, active nav, focus
 *   navy          all body text and titles
 *   teal          done / success      gold   in progress / streak
 *   coral         overdue / error
 */
:root {
	/* Brand and action */
	--qc-color-indigo: #281269;
	--qc-color-violet: #7c06fe;
	--qc-color-violet-hover: #5224c9;
	--qc-color-violet-tint: #f1eefe;

	/* Text */
	--qc-color-navy: #23283b;
	--qc-color-text-secondary: #48405e;
	--qc-color-text-muted: #8a93a8;
	--qc-color-panel-dark: #2e2a3d;

	/* Surfaces and lines */
	--qc-color-white: #ffffff;
	--qc-color-bg-page: #f6f4fe;
	--qc-color-bg-alt: #eaeff6;
	--qc-color-bg-locked: #f7f9fc;
	--qc-color-border: #e1e8f3;
	--qc-color-divider: #cbd7e9;

	/* Status: done / success */
	--qc-color-teal: #00c3c3;
	--qc-color-teal-tint: #c6fffa;
	--qc-color-teal-subtle: #eefefd;
	--qc-color-teal-dark: #23565b;
	--qc-color-teal-ink: #10292d;

	/* Status: in progress / streak */
	--qc-color-gold: #f8bc01;
	--qc-color-gold-tint: #fff9c2;
	--qc-color-gold-dark: #844b18;
	--qc-color-gold-ink: #3c2109;

	/* Status: overdue / error */
	--qc-color-coral: #f15442;
	--qc-color-coral-tint: #fae2de;
	--qc-color-coral-subtle: #fcf2f0;
	--qc-color-coral-dark: #852c1d;
	--qc-color-coral-text: #a53320;

	/* Full scales, for the in-between shades the named colours don't cover. */
	--qc-color-violet-100: #f1eefe;
	--qc-color-violet-200: #e8e2fd;
	--qc-color-violet-300: #d4c9fc;
	--qc-color-violet-400: #b6a0fb;
	--qc-color-violet-500: #9671f9;
	--qc-color-violet-600: #7945f8;
	--qc-color-violet-700: #7c06fe;
	--qc-color-violet-800: #5224c9;
	--qc-color-violet-900: #441da0;
	--qc-color-violet-1000: #281269;

	--qc-color-teal-100: #eefefd;
	--qc-color-teal-200: #c6fffa;
	--qc-color-teal-300: #8efff7;
	--qc-color-teal-400: #4dfbf3;
	--qc-color-teal-500: #5ae0e0;
	--qc-color-teal-600: #00c3c3;
	--qc-color-teal-700: #399399;
	--qc-color-teal-800: #23565b;
	--qc-color-teal-900: #1f474a;
	--qc-color-teal-1000: #10292d;

	--qc-color-gold-100: #fffde8;
	--qc-color-gold-200: #fff9c2;
	--qc-color-gold-300: #fff685;
	--qc-color-gold-400: #fdeb53;
	--qc-color-gold-500: #fbdb3b;
	--qc-color-gold-600: #f8bc01;
	--qc-color-gold-700: #d38d25;
	--qc-color-gold-800: #844b18;
	--qc-color-gold-900: #6a3d16;
	--qc-color-gold-1000: #3c2109;

	--qc-color-coral-100: #fcf2f0;
	--qc-color-coral-200: #fae2de;
	--qc-color-coral-300: #f1a89c;
	--qc-color-coral-400: #ea7a67;
	--qc-color-coral-500: #f15442;
	--qc-color-coral-600: #c94028;
	--qc-color-coral-700: #a53320;
	--qc-color-coral-800: #852c1d;
	--qc-color-coral-900: #6c291d;
	--qc-color-coral-1000: #39140e;

	/* The one shadow: modals, menus, the course-finished pop-up. */
	--qc-shadow-float: 0 12px 40px rgba(40, 18, 105, 0.14);
}