/* ------------------------------------------------------------------------------
   Development environment styling

   Loaded by layouts/header.html.twig when ENVIRONMENT is 'development'.

   Chrome only - navbar, sidebar, banner. Nothing that affects layout, so
   development cannot lay out differently from production and hide a bug.
   ------------------------------------------------------------------------------ */

:root {
	--vudio-dev-burnt-orange: #442200;
}

/* ------------------------------------------------------------------------------
   The tint, done by moving a token (VUD-412).

   Two rules used to sit here painting `.navbar.fixed-top.bg-dark` and `.sidebar`
   burnt orange directly. They existed for Classic, and Classic is gone, so they
   have gone with it.

   They had to go rather than merely being redundant. Removing Classic unscoped
   the theme's own `.sidebar` rule from `[data-vd-skin="v2"] .sidebar` to a bare
   `.sidebar`, and this file is UNLAYERED while the theme lives in
   `@layer components`. For `!important` declarations the layer order reverses,
   so an unlayered `!important` beats a layered one whatever the specificity -
   and the rail turned burnt orange on penguin. This file already recorded why
   that is wrong: the section headings measure 2.48:1 against it.

   Under the redesign the chrome colour is --vd-chrome, so the tint is one
   variable and every part of the design that reads it follows - which is the
   point of having tokens at all, and it means this file no longer needs to know
   which selector paints the navbar.

   The SIDEBAR is deliberately not tinted here. Under the redesign the rail is a
   light surface carrying 13px labels, and painting it burnt orange fails
   contrast outright: the section headings measured 2.48:1 against it. The
   navbar plus the banner is already colour across the top of every screen,
   which was the point.
   ------------------------------------------------------------------------------ */
:root {
	--vd-chrome: var(--vudio-dev-burnt-orange);
	/* Light enough to pass AA on the orange as well as on the house navy. */
	--vd-chrome-faint: #d8b9a4;
	--vd-chrome-line: #5c3300;
}

/* A literal label, because colour alone is not enough: it does not survive a
   screenshot pasted into a ticket, and it does not help anyone who cannot
   distinguish it from the production dark theme. */
.environment-banner {
	background-color: var(--vudio-dev-burnt-orange);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	padding: .15rem 0;
}