/* Brand preset: MSP / MOBEX ServicePortal (the reference)
   Values verbatim from Mx.FrontendReact/src/styles.css (Edition 2, saturated
   10/2026). Anchors from the MOBEX Styleguide: Blau #3d7ff0 at primary-500,
   Türkis #4897a9 at carrier-500, Grün #74c239 at accent-400, Light Surface
   #f4f7f8 at neutral-50, Dark Navy #091b28 at neutral-950.
   Rule of the brand: Türkis trägt, Blau handelt (carrier carries, primary acts).
   Logos: ~/.claude/skills/mobex-branding/assets/logos/ (msp-dark.svg / msp-white.svg). */
:root {
	--brand-font: "Lato", system-ui, sans-serif;
	/* Dark Navy as the ink of every shadow and backdrop. */
	--brand-ink-rgb: 9, 27, 40;
	/* The soft slate tint of the five-layer raised shadows. */
	--brand-shadow-rgb: 102, 133, 153;

	/* Primary: Blau (217°), the one interaction hue. */
	--brand-primary-50: #eaf2ff;
	--brand-primary-100: #d6e6ff;
	--brand-primary-200: #b0ccff;
	--brand-primary-300: #8cb4ff;
	--brand-primary-400: #5c95f7;
	--brand-primary-500: #3d7ff0;
	--brand-primary-600: #1f63d6;
	--brand-primary-700: #1a50ad;
	--brand-primary-800: #173f85;
	--brand-primary-900: #132f62;
	--brand-primary-950: #0d1e37;

	/* Carrier: Türkis (191°), labels, column heads, orbs, domain "contracts". */
	--brand-carrier-50: #e4f4f7;
	--brand-carrier-100: #d2e8ee;
	--brand-carrier-200: #a9d5e0;
	--brand-carrier-300: #84c0cf;
	--brand-carrier-400: #62adbd;
	--brand-carrier-500: #4897a9;
	--brand-carrier-600: #3c7988;
	--brand-carrier-700: #2a5c6a;
	--brand-carrier-800: #224048;
	--brand-carrier-900: #0f272e;
	--brand-carrier-950: #061b20;

	/* Accent: Grün (100°), domain "assets / devices". */
	--brand-accent-50: #e4f9d9;
	--brand-accent-100: #d4f1c4;
	--brand-accent-200: #b5e29b;
	--brand-accent-300: #95d26f;
	--brand-accent-400: #74c239;
	--brand-accent-500: #5ea12c;
	--brand-accent-600: #4a811f;
	--brand-accent-700: #366313;
	--brand-accent-800: #214600;
	--brand-accent-900: #0e2b00;
	--brand-accent-950: #051f00;

	/* Neutral: teal-tinted grey. 50 Light Surface, 600 muted text, 950 Dark Navy. */
	--brand-neutral-50: #f4f7f8;
	--brand-neutral-100: #e6eff1;
	--brand-neutral-200: #cfdcdf;
	--brand-neutral-300: #b1c0c4;
	--brand-neutral-400: #93a5aa;
	--brand-neutral-425: #8b9ea3;
	--brand-neutral-450: #84989d;
	--brand-neutral-500: #758b90;
	--brand-neutral-550: #698289;
	--brand-neutral-600: #5e7a82;
	--brand-neutral-700: #445a5f;
	--brand-neutral-800: #1c3140;
	--brand-neutral-900: #132837;
	--brand-neutral-950: #091b28;

	/* Categorical hues: violet 270° and plum 320°, meaning nothing else. */
	--brand-cat-a-400: #a882ce;
	--brand-cat-a-500: #8c56c2;
	--brand-cat-b-400: #c66ca8;
	--brand-cat-b-500: #b54a91;
}