/*
 * Home — "sky" trial palette.
 *
 * A test palette taken from the NBS sun banner (public/images/nbs_back1.jpg):
 * the artwork is not used on the page, only its colours. Kept in its own file
 * so it can be dropped without touching home.css — remove the .home--sky class
 * (src/pages/Home.jsx) and the stylesheet link (server.jsx) and the site is
 * back on the shipped palette.
 *
 * The shipped palette, recorded here so the two can be compared side by side:
 *
 *     --home-brand           #1b4196   brand navy, header bar and hero top
 *     --home-brand-deep      #14306f   hero gradient foot, primary button ink
 *     --home-ink             #22262b   body ink on the pale bands
 *     --home-ink-strong      #101317   headings, also the code slab ground
 *     --home-ink-muted       #6b7280   secondary ink
 *     --home-rule            rgba(0, 0, 0, 0.11)
 *     --home-surface         #fff
 *     --home-ground          #f6f7f9
 *
 * The sampled colours: the banner's flat field is #0089CD, its disc runs
 * #FFE8B2 -> #F6A02C -> #EE8A18, and the rays are #E4F0FC.
 */

.home--sky {
	/*
	 * The banner's #0089CD is the sky itself, and white sits on it at only
	 * 3.9:1 — bright enough to be the page's light, too bright to be the
	 * ground under text. So the ground is that blue taken down two steps and
	 * the sky is kept as an accent, used where nothing has to be read off it.
	 */
	--home-sky: #0089cd;
	--home-brand: #0570a8;
	--home-brand-deep: #02486f;

	/* The sun's amber, darkened until it holds small ink on white */
	--home-accent: #b96605;

	--home-ink: #1e242a;
	--home-ink-strong: #0b1a24;
	--home-ink-muted: #596873;

	--home-ink-invert: rgba(255, 255, 255, 0.88);
	--home-ink-invert-strong: #fff;
	--home-ink-invert-muted: rgba(255, 255, 255, 0.72);

	/* Rules and pale ground carry a trace of the sky rather than neutral grey */
	--home-rule: rgba(2, 72, 111, 0.16);
	--home-surface: #fff;
	--home-ground: #f1f7fb;
}

/*
 * The hero keeps the banner's own light at its head and deepens toward the
 * page, so the band reads as sky rather than as a flat panel.
 */
.home--sky .home__hero {
	background: linear-gradient(180deg, var(--home-sky) 0%, var(--home-brand-deep) 100%);
}

/* The eyebrow is the one place the sun's amber appears on a pale band */
.home--sky .home__eyebrow { color: var(--home-accent); }

.home--sky .home__stop--live::before { background-color: var(--home-accent); }

/* The status sign takes the banner's own disc: its light amber into the sun's */
.home--sky {
	--home-warn: #f6a02c;
	--home-warn-edge: #ee8a18;
	--home-warn-ink: var(--home-accent);
}

/* Amber on white would fail on small ink, so the sun stays on the button ground */
.home--sky .home__button--primary:hover,
.home--sky .home__button--primary:focus-visible {
	background-color: #ffe8b2;
	color: #7a3d00;
}