/*
 * Livetech WP Tools - brand tokens.
 *
 * The single source of every colour, font and shared value the plugin's
 * stylesheets use. Registered as 'livetech-wp-tools-tokens' (see
 * includes/assets.php) and loaded as a dependency of each of them; the
 * holding page template prints it inline. Change a value here and every
 * screen follows.
 *
 * whitelabel-admin-styling.css is the one exception: it maps these colours
 * onto WordPress's own theme variables with literal values, since those
 * also need to resolve where this file isn't loaded.
 */

:root {
	/* Brand */
	--lt-navy: #14134f;
	--lt-navy-light: #1e1d6e;
	--lt-navy-dark: #121046;
	--lt-coral: #fd9357;
	--lt-coral-hover: #e07a3a;
	--lt-coral-active: #c96a31;
	--lt-coral-text: #b04a14; /* Coral dark enough to read as text on white. */
	--lt-coral-ring: rgba(253, 147, 87, .3);

	/*
	 * Light surfaces (wp-admin screens, dialogs). These all flip in wp-admin
	 * dark mode (body.lt-theme-dark, below) - use them, not --lt-navy or
	 * #fff, for text and surfaces that should follow the mode. --lt-navy
	 * stays the fixed brand navy, e.g. for text on the coral accent.
	 */
	--lt-ink: var(--lt-navy);
	--lt-surface: #ffffff;
	--lt-page: #f0f0f1; /* wp-admin's own page background. */
	--lt-emphasis: var(--lt-navy); /* Filled "selected" states: active filter, switch on. */
	--lt-on-emphasis: #ffffff;
	--lt-ink-muted: #4b4a78;
	--lt-bg-soft: #f5f4fa;
	--lt-tint: #fff3eb;
	--lt-border: #dcdbea;
	--lt-border-strong: #7d7ca4;
	--lt-shadow: 0 1px 2px rgba(20, 19, 79, .06), 0 8px 24px rgba(20, 19, 79, .08);
	--lt-shadow-raised: 0 2px 4px rgba(20, 19, 79, .08), 0 16px 40px rgba(20, 19, 79, .14);

	/* Dark surfaces (login, holding page, admin bar) */
	--lt-muted-on-dark: #c9c8e3;
	--lt-glass: rgba(255, 255, 255, .045);
	--lt-glass-border: rgba(255, 255, 255, .09);
	--lt-input-on-dark: rgba(255, 255, 255, .06);
	--lt-input-border-on-dark: rgba(255, 255, 255, .14);
	--lt-shadow-on-dark: 0 24px 60px rgba(6, 4, 40, .45);
	--lt-backdrop: radial-gradient(60% 42% at 50% 0%, var(--lt-navy-light) 0%, transparent 70%), var(--lt-navy);

	/* Status */
	--lt-green: #3ad29f;
	--lt-green-text: #1f7a4d;
	--lt-red: #ff8a80;
	--lt-red-text: #b3261e;

	/* Type, shape and motion */
	--lt-font: "nexa", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--lt-mono: ui-monospace, Consolas, monospace;
	--lt-radius-pill: 999px;
	--lt-transition: .15s ease;
}

/*
 * wp-admin dark mode, chosen per user from the admin bar (see
 * includes/whitelabel-admin-dark-mode.php). Same palette as the dark mode
 * on livetech.co.uk. Also flipped on <html> so the page canvas below the
 * body (on screens taller than the window) takes the dark colours too.
 */
html:has(body.lt-theme-dark),
body.lt-theme-dark {
	--lt-ink: #ffffff;
	--lt-surface: #262566;
	--lt-page: #14134f;
	--lt-chrome: #0c0b35; /* Admin menu and bar - deeper than the page. */
	--lt-emphasis: #ffffff;
	--lt-on-emphasis: #14134f;
	--lt-ink-muted: #c9c8e3;
	--lt-bg-soft: #1d1c5c;
	--lt-tint: #2e2560;
	--lt-border: #34337a;
	--lt-border-strong: #8483bd;
	--lt-coral-text: #fd9357;
	--lt-green-text: #3ad29f;
	--lt-red-text: #ff8a80;
	--lt-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .25);
	--lt-shadow-raised: 0 2px 4px rgba(0, 0, 0, .25), 0 16px 40px rgba(0, 0, 0, .4);
}