/* Colour tokens: one place for the portal's palette, loaded before every other stylesheet.
 *
 * Tokens are named by role (what the colour is for), not by hue, so a palette change is one edit
 * here. Use them for new CSS, and replace a page's literal colours with them whenever that rule is
 * touched; tests/browser/css-colour-tokens.test.cjs only lets the number of literals go down.
 * Values match the colours the pages used before the tokens existed, except --color-text-subtle,
 * darkened to meet WCAG AA contrast (grey text below 4.5:1 now uses --color-text-muted). */
:root {
	/* Text */
	--color-text-strong: #1f2933;      /* headings and key values */
	--color-text: #344054;             /* body text and labels */
	--color-text-secondary: #475467;
	--color-text-muted: #667085;       /* hints, captions, meta */
	--color-text-subtle: #6b7480;      /* placeholders, de-emphasised counts (4.7:1 on white, WCAG AA) */
	--color-text-ink: #171717;         /* near-black page titles */
	--color-text-inverse: #ffffff;     /* text on brand or dark surfaces */
	--color-text-on-dark-muted: rgba(255, 255, 255, 0.78);

	/* Surfaces */
	--color-surface: #ffffff;          /* cards, panels, inputs */
	--color-surface-subtle: #f8fafc;
	--color-surface-muted: #f5f6f7;
	--color-surface-sunken: #eef1f4;
	--color-surface-hover: #f2f4f7;
	--color-on-dark-faint: rgba(255, 255, 255, 0.08);   /* hover/fill on dark surfaces */
	--color-on-dark-soft: rgba(255, 255, 255, 0.16);

	/* Borders */
	--color-border: #d2d8df;
	--color-border-strong: #cbd1d8;
	--color-border-subtle: #eaecf0;
	--color-border-faint: #edf0f2;

	/* Brand and accent */
	--color-brand: #2d3949;            /* primary buttons, selected states, header */
	--color-accent: #526071;           /* secondary emphasis, active borders */
	--color-accent-soft: #697f9b;
	--color-focus: #526071;            /* focus outlines */

	/* Status */
	--color-danger: #b42318;
	--color-danger-strong: #8b3529;    /* error text on light red */
	--color-danger-soft: #fff4f2;
	--color-danger-border: #e3b6ae;
	--color-success: #1f5f3a;
	--color-success-soft: #e3f4ea;
	--color-warning-text: #8a5a00;
	--color-warning-soft: #fff8e6;
	--color-warning-border: #ecd39b;
	--color-info-soft: #eef3f8;
	--color-info-border: #c9d6e3;
	--color-highlight: #ffeaa0;        /* search matches */

	/* Shadows and overlays */
	--color-shadow: rgba(16, 24, 40, 0.08);
	--color-shadow-strong: rgba(10, 20, 35, 0.24);
	--color-overlay: rgba(15, 23, 34, 0.86);   /* behind an enlarged screenshot */

	/* Account pages (Settings, Change password) on the dark portal backdrop */
	--gradient-portal-backdrop: radial-gradient(circle at 50% -15%, #4a5b72 0, #344257 34%, #273445 72%, #222d3b 100%);
	--color-header-on-backdrop: rgba(25, 34, 46, 0.25);
	--color-border-on-backdrop: rgba(255, 255, 255, 0.18);
	--shadow-account-card: 0 22px 54px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-account-panel: 0 22px 54px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
	--color-avatar-border: #d5dfeb;
	--gradient-avatar: linear-gradient(145deg, #edf2f7, #dce5ef);
	--color-role-dot: #5a7d66;

	/* Users page (users.css): repeated neutrals of the users list, editor and pills */
	--color-users-line: #e3e7eb;
	--color-users-line-soft: #e6eaee;
	--color-users-fill: #f4f6f8;
	--color-users-fill-soft: #f7f9fb;
	--color-users-row-alt: #f9fafb;
	--color-users-ink: #303944;
	--color-users-ink-strong: #2b3647;
	--color-users-ink-soft: #344150;
	--color-users-ink-muted: #405064;
	--color-users-success: #176b34;
	--color-users-shadow: rgba(15, 23, 42, 0.08);
	--color-users-ink-deep: #1f2937;
	--color-users-on-dark-hover: rgba(255, 255, 255, 0.09);
	--color-users-on-dark-line: rgba(255, 255, 255, 0.12);
}