/**
 * TrustLens token layer — the one place a shared value is stated.
 *
 * Every colour, elevation and icon that more than one stylesheet needs is
 * declared here, at :root, exactly once. Downstream sheets read them with
 * var(); they never restate a value this file owns, and they never re-declare
 * a token this file declares. A stylesheet that needs a value nobody else
 * uses keeps it as a literal — a token exists to give one name to a value
 * used in more than one place, not to rename every colour in the plugin.
 *
 * Component-scoped custom properties are a different thing and stay where
 * they are: `.tlcc { --tlcc-blue: … }` is that component's parameter, its own
 * API for variants, and it is correct as long as it *reads* the token layer
 * instead of restating the value.
 *
 * Enqueued as `trustlens-tokens`, a dependency of every other TrustLens
 * sheet, so the tokens are in scope wherever plugin CSS renders.
 *
 * Names are semantic, not literal: `--wstl-danger`, never `--wstl-red`. The
 * segment palette is the plugin's own vocabulary and owns its values; the
 * state names derive from it, so "critical" and "danger" cannot drift apart.
 */

:root {
	/* ---------------------------------------------------------------- Brand */
	--wstl-color-primary: #3377EE;
	--wstl-color-primary-soft: #EAF1FF;
	--wstl-color-accent: #635BFF;

	/* ------------------------------------------------------- Segment palette
	   The customer-trust vocabulary. These own their values; everything else
	   that means "good", "caution" or "critical" points back here. */
	--wstl-segment-vip: #1E7A46;
	--wstl-segment-trusted: #2B6FE8;
	--wstl-segment-normal: #607080;
	--wstl-segment-caution: #B88318;
	--wstl-segment-caution-soft: #F2DFC0;
	--wstl-segment-caution-ink: #4F3A00;
	--wstl-segment-risk: #C4652B;
	/* Badge inks: the segment colour itself misses WCAG AA on its own soft
	   ground at badge size (trusted read 4.08:1, risk 3.52:1). These are the
	   same hue, dark enough to clear it. */
	--wstl-segment-risk-soft: #FBEEE4;
	--wstl-segment-risk-ink: #9A4A1D;
	--wstl-segment-trusted-ink: #1E5BC6;
	--wstl-segment-critical: #B23A48;

	/* ------------------------------------------------------- State, by name */
	--wstl-brand: var(--wstl-color-primary);
	--wstl-info: var(--wstl-segment-trusted);
	--wstl-success: var(--wstl-segment-vip);
	--wstl-warning: var(--wstl-segment-caution);
	--wstl-danger: var(--wstl-segment-critical);
	--wstl-neutral: var(--wstl-segment-normal);

	/* Soft fills behind a state colour, on a white surface. */
	--wstl-success-soft: #E7F3EC;
	--wstl-warning-soft: #F9F0DB;
	--wstl-danger-soft: #FBE9EB;

	/* ------------------------------------------------------------------ Ink */
	--wstl-ink: #1A2433;
	--wstl-text: #14283E;
	--wstl-muted: #5B6D80;
	/* 4.62:1 on white. #6B7A8D read 4.38:1 and missed WCAG AA for body text
	   by a hair; this is the same colour to the eye and clears it. */
	--wstl-ink-muted: #687689;
	--wstl-ink-dim: #46586B;
	--wstl-ink-faint: #9AA7B6;

	/* ------------------------------------------------- Surfaces and hairlines */
	--wstl-surface: #FFFFFF;
	--wstl-surface-soft: #F6F9FC;
	--wstl-surface-sunken: #F8FAFC;
	--wstl-bg-soft: #F4F7FB;
	--wstl-line: #E7ECF3;
	--wstl-line-soft: #F1F4F8;
	--wstl-border: #D5E0EB;

	/* ---------------------------------------------------------- Pro marker
	   The "PRO" tag everywhere: a soft, refined purple, on-dark and on-light
	   sharing one colour family. */
	--wstl-pro-fg: #4F46E5;
	--wstl-pro-bg: #EEF0FE;
	--wstl-pro-ring: rgba(79, 70, 229, 0.22);

	/* ------------------------------------------------------------ Type scale
	   Four steps. The screens had thirty-seven font sizes, most of them half a
	   pixel apart and none of them a decision anybody made twice; these are the
	   four the Automation rule dialog uses, which is the one surface that was
	   built as a whole. */
	--wstl-text-xs: 11px;      /* uppercase micro-labels, timestamps */
	--wstl-text-sm: 12px;      /* hints and secondary lines */
	--wstl-text-base: 13px;    /* controls, body copy, field labels */
	--wstl-text-lg: 15px;      /* panel and section titles */

	/* ---------------------------------------------------------------- Shape
	   Controls are the tightest curve, cards sit between, panels are the
	   loosest — so nesting reads as nesting. */
	--wstl-radius-control: 8px;
	--wstl-radius-card: 10px;
	--wstl-radius-panel: 12px;

	/* ------------------------------------------------------------- Controls */
	--wstl-control-height: 38px;
	--wstl-control-pad-x: 12px;

	/* ------------------------------------------------------------ Elevation */
	--wstl-shadow-sm: 0 8px 20px rgba(16, 42, 67, 0.06);
	--wstl-shadow-md: 0 14px 34px rgba(16, 42, 67, 0.08);

	/* ---------------------------------------------------------------- Icons */
	--wstl-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}