/* HRThink design tokens (2.0.0)
   ---------------------------------------------------------------------------------------------------------------------
   THE ONE PLACE that defines how the whole site looks: colours, corners, shadows and fonts. The theme and every HRThink plugin
   (HR Lab, Practice, Resume Builder, Recruitment, Account, Finance) read these values with var(--ex-...), so changing a token
   here, or a colour in Appearance > Customize > HRThink design, restyles every page at once.

   Change the three brand colours and everything else follows. The other colours are derived from them below.
   Plugins always write var(--ex-blue, #0b49a1): the second value is only a fallback for when the theme is not active. */

:root {
	/* 1. Brand colours: the only three you need to change */
	--ex-blue: #0b49a1;     /* links, secondary buttons, highlights */
	--ex-navy: #0b1f44;     /* headings, dark bands, the footer */
	--ex-maroon: #9b1b30;   /* the one accent: main buttons and thin rules */

	/* 2. Derived colours (computed from the brand colours where the browser supports it; see the @supports block) */
	--ex-blue-d: #082f6b;
	--ex-blue-mid: #3f6fb5;
	--ex-blue-soft: #7e9fd4;
	--ex-tint: #eef3fb;
	--ex-maroon-d: #7a1424;
	--ex-soft: #f3f6fb;     /* pale band and panel background */
	--ex-line: #d9e1ee;     /* borders and dividers */
	--ex-ink: #0b1f44;      /* strongest text */
	--ex-text: #34425f;     /* body text */
	--ex-muted: #5a6a88;    /* secondary text */
	--ex-faint: #8a96ad;    /* placeholders and captions */
	--ex-surface: #ffffff;  /* cards and the page */

	/* Page width: the standard content container. Wide enough for a laptop screen, capped on big monitors. */
	--ex-wrap: 1320px;
	--ex-gutter: clamp(20px, 3vw, 48px);

	/* 3. Shape */
	--ex-r-card: 4px;       /* cards, panels, tables */
	--ex-r-ctl: 3px;        /* buttons, chips, inputs */
	--ex-shadow-card: 0 1px 2px rgba(11, 31, 68, .07);
	--ex-shadow-lift: 0 22px 40px -26px rgba(11, 31, 68, .4);

	/* 4. Type */
	--ex-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ex-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--ex-blue-d: color-mix(in srgb, var(--ex-blue) 72%, #000);
		--ex-blue-mid: color-mix(in srgb, var(--ex-blue) 76%, #fff);
		--ex-blue-soft: color-mix(in srgb, var(--ex-blue) 50%, #fff);
		--ex-tint: color-mix(in srgb, var(--ex-blue) 7%, #fff);
		--ex-maroon-d: color-mix(in srgb, var(--ex-maroon) 78%, #000);
		--ex-soft: color-mix(in srgb, var(--ex-blue) 4%, #fff);
		--ex-line: color-mix(in srgb, var(--ex-blue) 15%, #fff);
		--ex-ink: var(--ex-navy);
		--ex-text: color-mix(in srgb, var(--ex-navy) 82%, #fff);
		--ex-muted: color-mix(in srgb, var(--ex-navy) 66%, #fff);
		--ex-faint: color-mix(in srgb, var(--ex-navy) 48%, #fff);
		--ex-shadow-card: 0 1px 2px color-mix(in srgb, var(--ex-navy) 8%, transparent);
		--ex-shadow-lift: 0 22px 40px -26px color-mix(in srgb, var(--ex-navy) 45%, transparent);
	}
}

/* Older theme and plugin variable names, pointed at the tokens so nothing keeps a private copy of a colour. */
:root {
	--bg: var(--ex-surface); --bg-band: var(--ex-soft); --tint: var(--ex-tint); --line: var(--ex-line);
	--navy: var(--ex-navy); --ink: var(--ex-ink); --muted: var(--ex-muted); --primary: var(--ex-blue); --primary-d: var(--ex-blue-d);
	--hx-ink: var(--ex-ink); --hx-text: var(--ex-text); --hx-primary: var(--ex-blue); --hx-primary-d: var(--ex-blue-d); --hx-violet: var(--ex-blue); --hx-dot: transparent;
	--hx-shadow: var(--ex-shadow-card), var(--ex-shadow-lift);
	--violet: var(--ex-blue); --cyan: var(--ex-blue); --serif: var(--ex-serif); --sans: var(--ex-sans); --radius: var(--ex-r-card);
}