/*
 * The brand layer — everything that is "the brand colour", and nothing else.
 *
 * Theme-owned, not a design-system file: it sits outside tokens/ so the token
 * files stay verbatim. It loads right after them, on the front end and in the
 * editor canvas, and a child theme's own brand.css loads after this one and
 * layers on top of it (see "Ny merkevare" in README.md, and the commented
 * template in tools/brand.css).
 *
 * Every brand alias below is also declared in tokens/colors.css. That double
 * definition is deliberate: colors.css stays the design system's copy, and this
 * file re-points each alias at the --accent-* ramp, so a new brand sets the 11
 * ramp steps and every alias follows. `php tools/check-tokens.php` fails when an
 * alias is missing here; `php tools/check-brand.php` fails when Delsenter's
 * resolved values move.
 *
 * Delsenter's values are today's, exactly: the ramp is --blue-*, sampled from
 * the logo at --accent-600.
 */
:root {
	/* ── The accent ramp ──────────────────────────────────────────────────── */
	--accent-50: #eef8ff;
	--accent-100: #d8eefd;
	--accent-200: #b2ddfa;
	--accent-300: #7fc6f4;
	--accent-400: #42a9ea;
	--accent-500: #1791dc;
	--accent-600: #007fcd;
	--accent-700: #0067a8;
	--accent-800: #065488;
	--accent-900: #0a4670;
	--accent-950: #072c48;

	/* ── Brand aliases, re-pointed at the ramp ────────────────────────────────
	 * Same steps as tokens/colors.css, which explains the split: --brand is
	 * non-text-bearing, --brand-strong is the fill that carries text. */
	--brand: var(--accent-600);
	--brand-hover: var(--accent-700);
	--brand-active: var(--accent-800);
	--brand-strong: var(--accent-700);
	--brand-strong-hover: var(--accent-800);
	--brand-strong-active: var(--accent-900);
	--brand-subtle: var(--accent-50);
	--brand-subtle-hover: var(--accent-100);
	--brand-contrast: var(--text-on-brand);

	--text-brand: var(--accent-700);
	--text-brand-hover: var(--accent-800); /* the a:hover tokens/base.css writes as --blue-800 */
	--surface-brand: var(--accent-700);
	--surface-brand-soft: var(--accent-50);
	--border-brand: var(--accent-600);
	/* The design system has --blue-400 here, 2.59:1 on the card — under the 3:1 a
	 * focus indicator needs. The theme draws focus with --border-brand, so this
	 * follows it: a token named for focus must be safe to draw focus with. */
	--border-focus: var(--accent-600);

	--status-info: var(--accent-600);
	--status-info-bg: var(--accent-50);
	--badge-new: var(--accent-700);

	/* The same shapes as the token files; only the colour is derived, so a new
	 * ramp moves the halo and the shadow with it. */
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-600) 22%, transparent);
	--shadow-brand: 0 6px 18px color-mix(in srgb, var(--accent-600) 20%, transparent);

	/* The hero wash — the one gradient in the theme, screens.css and theme.json. */
	--hero-wash-from: var(--accent-50);
	--hero-wash-to: var(--surface-page);

	/* ── On a brand fill ──────────────────────────────────────────────────────
	 * Whatever sits on --surface-brand, --brand-strong, --badge-new or a checked
	 * --brand control: the campaign notice, the primary button, counters, the
	 * current page, the tick. White here, tuned against --accent-700. A light
	 * brand (yellow, orange) sets --text-on-brand dark; the muted step and the
	 * hairline follow it. Run `php tools/check-brand.php` after changing them.
	 *
	 * --text-on-brand-muted is the lowest step that still clears 4.5:1 on
	 * --surface-brand — 86%; the design's 72% was 3.38:1. */
	--text-on-brand: var(--neutral-0);
	--text-on-brand-muted: color-mix(in srgb, var(--text-on-brand) 86%, transparent);
	--border-on-brand: var(--text-on-brand);
}