/* ====================================================================================

	Color variables

	Named after the actual color first, then aliased to a semantic role. Components consume the semantic role so the skin toggles (Deel Skin, Dr. Bombay Skin) can re-declare roles on a scope class without touching component CSS.

	@related colors

==================================================================================== */

/* -------------------------------------
	Basic =colors
------------------------------------- */

:root {

	--white:      #ffffff;
	--black:      #000000;
	--black-soft: #222222;

	--grey-dark:  #4b4b4b;
	--grey:       #4f4f4f;
	--grey-mid:   #666666;
	--grey-muted: #7a7a7a;
	--grey-soft:  #999999;
	--grey-line:  #bbbbbb;
	--grey-field: #b2b2b2;
	--grey-edge:  #e8e8e8;
	--grey-fill:  #d9d9d9;

	--blue:       #0069c9;
	--rust:       #c13407;

	/* Page canvas behind the chrome. Figma's frame fill is not exposed through the read-only MCP (the 1440x800 `Rectangle 21` above it has no fill), so this is LinkedIn's canvas value, confirmed by eye against the artboard render. */
	--cream:      #f4f2ee;

	/* Warmer cream. Dr. Bombay's card surface everywhere, and the Deel skin's top bar on mobile - one hex, two skins, so it lives here rather than in either. */
	/* @match deel-snoop-iframe - card colour, type colour and link colour restated in the CSS the application embed is skinned with */
	--cream-warm: #faf1de;

}

/* -------------------------------------
	=Contextual colors

	Roles, not values. Re-declare these (not the component rules) when a skin is toggled on.
------------------------------------- */

:root {

	--color-bg-page:      var(--cream);
	--color-bg-surface:   var(--white);

	--color-fg-default:   var(--black);
	--color-fg-secondary: var(--grey);
	--color-fg-muted:     var(--grey-muted);
	--color-fg-link:      var(--blue);

	--color-border-card:  var(--grey-edge);
	--color-border-field: var(--grey-field);
	--color-rule:         var(--grey-line);

	--color-fg-active:    var(--blue);

}

/* -------------------------------------
	=High-contrast preference

	The two greys that sit under WCAG's 4.5:1 at body sizes - #7a7a7a on white (~4.3:1, timestamps / stats / nav labels) and #999 on the page ground (~2.6:1, the sort label) - deepen to the mid grey, which clears the ratio on both grounds. Gated on the OS/browser preference rather than corrected outright, so the design's LinkedIn-miniature greys stay as drawn for everyone else. Every failing use routes through these two primitives, so this is the whole fix.
------------------------------------- */

@media ( prefers-contrast: more ) {

	:root {
		--grey-muted: var(--grey-mid);
		--grey-soft:  var(--grey-mid);
	}

}