/* SEISENSE Publisher: design tokens.
   ---------------------------------------------------------------------------------------------------------------------
   THE ONE PLACE that decides how the whole site looks. Every colour, size and shape used by the theme (main.css) and read by
   the plugins (HRThink Account, Journal Fit) comes from a variable defined here, so changing a value here restyles every page.
   You can also change the brand colours without editing code: Appearance > Customize > SEISENSE design.

   Change the brand colours in section 1 and everything else follows: section 2 is worked out from them (browsers that cannot
   do color-mix() keep the static values written first). Never write a colour directly in main.css; add a token here instead. */

:root {
	/* 1. BRAND: the only colours you need to choose */
	--brand: #1b22b0;          /* primary: links, buttons, prominent text */
	--navy: #0a0e4d;           /* dark bands, footer, headings */
	--accent: #c4d434;         /* the complement: main call-to-action, highlights, decorations (SEIJOM green) */
	--hl-a: #e3f6b2;           /* pastel highlight band behind key words: start */
	--hl-b: #d1ed9a;           /* ...and end */
	--surface: #ffffff;        /* page and cards */
	--journal-seijom: var(--brand);   /* one colour per journal: add --journal-<key> for a new journal */
	--journal-sbr: #8a1c2b;

	/* 2. DERIVED colours (static fallbacks; recomputed from section 1 below) */
	--brand-d: #12177f; --brand-mid: #4b52d6; --brand-soft: #8d92ea;
	--navy-2: #141a78; --navy-3: #2830c4;
	--band: #f4f5ff; --tint: #eceeff; --tint-2: #dcdfff; --line: #dfe2f3; --field-line: #cdd1ea;
	--ink: #0b0f3b; --text: #33385f; --muted: #5d6288; --faint: #8a8fb4;
	--accent-d: #66770a; --accent-tint: #f3f8d8; --accent-hover: #d3e23f; --accent-line: #dbe7a2; --on-accent: #1c2400;
	--sbr: var(--journal-sbr); --sbr-d: #6d1422; --sbr-tint: #fbeef0;
	--on-dark-1: #e7e9ff; --on-dark-2: #cfd3ff; --on-dark-3: #bfc4f5; --on-dark-4: #9aa0e6;
	--ok: #1c8f4f; --ok-d: #15602f; --ok-tint: #e6f6ec; --danger: #a3182b;
	--sh: 0 1px 2px rgba(11, 15, 59, .06), 0 14px 30px -18px rgba(27, 34, 176, .28);

	/* 3. SHAPE, SIZE AND TYPE */
	--r: 10px; --r-s: 8px;
	--wrap: 1240px; --gutter: 28px; --wrap-inner: calc(var(--wrap) - 2 * var(--gutter));
	--header-h: 84px; --sec-y: 84px; --logo-h: 44px;
	--sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--fs-base: 17px; --fs-lead: 1.15rem;
	--fs-hero: clamp(2.5rem, 4.6vw, 3.8rem); --fs-h1: clamp(2.1rem, 4vw, 3.1rem); --fs-h2: clamp(1.9rem, 3.2vw, 2.6rem);

	/* 4. Per-component defaults (a journal block sets these for its own colour) */
	--acc: var(--brand); --acc-d: var(--brand-d); --acc-tint: var(--tint);

	/* 5. What the plugins read */
	--theme-ink: var(--ink); --theme-muted: var(--muted); --theme-line: var(--line);   /* aliases: a plugin may reuse the plain names */
	--ex-blue: var(--brand); --ex-blue-d: var(--brand-d); --ex-blue-mid: var(--brand-mid); --ex-blue-soft: var(--brand-soft); --ex-navy: var(--navy);
	--ex-maroon: var(--brand); --ex-maroon-d: var(--brand-d);   /* the Account plugin's "main button" colour: our primary */
	--ex-tint: var(--tint); --ex-soft: var(--band); --ex-line: var(--line); --ex-ink: var(--ink); --ex-text: var(--text); --ex-muted: var(--muted); --ex-faint: var(--faint); --ex-surface: var(--surface);
	--ex-r-card: var(--r); --ex-r-ctl: var(--r-s); --ex-sans: var(--sans); --ex-serif: var(--serif);
	--ex-shadow-card: 0 1px 2px rgba(11, 15, 59, .07); --ex-shadow-lift: 0 22px 40px -26px rgba(11, 15, 59, .4);
	--hjf-accent: var(--brand);                         /* Journal Fit's accent */
	--hjf-top: calc(var(--header-h) + 24px);            /* Journal Fit's sidebar sits below the sticky header */
	--hjf-max: var(--wrap-inner);                       /* and lines up with the header's content width */
	--hjf-gutter: calc(2 * var(--gutter));
}

@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--brand-d: color-mix(in srgb, var(--brand) 72%, #000);
		--brand-mid: color-mix(in srgb, var(--brand) 78%, var(--surface));
		--brand-soft: color-mix(in srgb, var(--brand) 50%, var(--surface));
		--navy-2: color-mix(in srgb, var(--navy) 62%, var(--brand));
		--navy-3: color-mix(in srgb, var(--brand) 82%, var(--surface));
		--band: color-mix(in srgb, var(--brand) 5%, var(--surface));
		--tint: color-mix(in srgb, var(--brand) 9%, var(--surface));
		--tint-2: color-mix(in srgb, var(--brand) 16%, var(--surface));
		--line: color-mix(in srgb, var(--brand) 14%, var(--surface));
		--field-line: color-mix(in srgb, var(--brand) 22%, var(--surface));
		--ink: color-mix(in srgb, var(--navy) 80%, #000);
		--text: color-mix(in srgb, var(--navy) 80%, var(--surface));
		--muted: color-mix(in srgb, var(--navy) 64%, var(--surface));
		--faint: color-mix(in srgb, var(--navy) 48%, var(--surface));
		--accent-d: color-mix(in srgb, var(--accent) 55%, #000);
		--accent-tint: color-mix(in srgb, var(--accent) 16%, var(--surface));
		--accent-hover: color-mix(in srgb, var(--accent) 86%, var(--surface));
		--accent-line: color-mix(in srgb, var(--accent) 45%, var(--surface));
		--on-accent: color-mix(in srgb, var(--accent) 14%, #000);
		--sbr-d: color-mix(in srgb, var(--sbr) 76%, #000);
		--sbr-tint: color-mix(in srgb, var(--sbr) 8%, var(--surface));
		--on-dark-1: color-mix(in srgb, var(--brand) 9%, var(--surface));
		--on-dark-2: color-mix(in srgb, var(--brand) 20%, var(--surface));
		--on-dark-3: color-mix(in srgb, var(--brand) 32%, var(--surface));
		--on-dark-4: color-mix(in srgb, var(--brand) 48%, var(--surface));
		--sh: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--brand) 28%, transparent);
		--ex-shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent);
		--ex-shadow-lift: 0 22px 40px -26px color-mix(in srgb, var(--ink) 40%, transparent);
	}
}

@media (max-width: 1399px) and (min-width: 961px) {
	:root { --logo-h: 38px; }   /* a slightly tighter header on laptops */
}
@media (max-width: 640px) {
	:root { --gutter: 18px; --sec-y: 56px; --fs-base: 16px; --logo-h: 36px; }
}