:root {
	/* ------------------------------ */
	/* Palette
	/* ------------------------------ */

	/* Brand */
	--tdeck-brand-accent: #0052FF;
	--tdeck-brand-accent-deep: #0041CC;
	--tdeck-brand-accent-light: #F0F6FF;
	--tdeck-brand-contrast: #FFFFFF;
	--tdeck-brand-gradient: linear-gradient(135deg, var(--tdeck-brand-accent) 0%, var(--tdeck-brand-accent-deep) 100%);
	--tdeck-shadow-brand: 0 4px 14px rgb(0 82 255 / 0.24);

	/* UI */
	--tdeck-ui-primary-text: #17191D;
	--tdeck-ui-secondary-text: #61666D;
	--tdeck-ui-disabled-text: #9EA3A9;
	--tdeck-ui-background: #F9FAFB;
	--tdeck-ui-surface: #FFFFFF;
	--tdeck-ui-border: #E4E5E7;
	--tdeck-ui-divider: #F3F4F5;

	/* State */
	--tdeck-success-background: #E4F8E5;
	--tdeck-success-text: #27852A;
	--tdeck-warning-background: #FFF8E6;
	--tdeck-warning-text: #997400;
	--tdeck-danger-background: #FDECEC;
	--tdeck-danger-text: #A32323;

	/* ------------------------------ */
	/* White-label drivers (Theme Lab)
	/*
	/* Dedicated tokens so a tenant can rebrand each surface from Settings →
	/* Theme Lab without side effects. TDECK_Branding injects overrides for
	/* these on wp_head; leaving them as-is keeps the single-palette look.
	/* Brand-derived defaults (sidebar-active, kpi-accent) reference the brand
	/* so they follow an accent change until explicitly overridden.
	/* ------------------------------ */
	--tdeck-sidebar-bg: #FFFFFF;
	--tdeck-sidebar-item-text: var(--tdeck-ui-secondary-text);
	--tdeck-sidebar-active-bg: var(--tdeck-brand-accent-light);
	--tdeck-sidebar-active-text: var(--tdeck-brand-accent);
	--tdeck-kpi-accent: var(--tdeck-brand-accent);
	--tdeck-login-bg: var(--tdeck-ui-background);

	/* ------------------------------ */
	/* Typography
	/* ------------------------------ */

	/* Base body stack. 'Inter' was named here historically but never loaded
	   (no @font-face / enqueue), so it silently fell back; dropped for a clean
	   system fallback. Tenants can pick a curated stack per slot in Theme Lab. */
	--tdeck-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

	/* Per-role font slots (Theme Lab). Default to the base body stack; the
	   injector overrides a slot only when the tenant picks a curated stack. */
	--tdeck-font-header: var(--tdeck-font-family);
	--tdeck-font-subheader: var(--tdeck-font-family);
	--tdeck-font-body: var(--tdeck-font-family);
	--tdeck-font-button: var(--tdeck-font-family);
	--tdeck-font-link: var(--tdeck-font-family);
	--tdeck-font-size-xs: 0.75rem;  /* 12px */
	--tdeck-font-size-sm: 0.875rem; /* 14px */
	--tdeck-font-size-base: 1rem;   /* 16px */
	--tdeck-font-size-lg: 1.125rem;/* 18px */
	--tdeck-font-size-xl: 1.25rem; /* 20px */
	--tdeck-font-size-2xl: 1.5rem;  /* 24px */
	--tdeck-font-size-3xl: 1.875rem;/* 30px */

	--tdeck-font-weight-regular: 400;
	--tdeck-font-weight-medium: 500;
	--tdeck-font-weight-semibold: 600;
	--tdeck-font-weight-bold: 700;

	/* ------------------------------ */
	/* Spacing
	/* ------------------------------ */

	--tdeck-space-1: 0.25rem; /* 4px */
	--tdeck-space-2: 0.5rem;  /* 8px */
	--tdeck-space-3: 0.75rem; /* 12px */
	--tdeck-space-4: 1rem;    /* 16px */
	--tdeck-space-5: 1.25rem; /* 20px */
	--tdeck-space-6: 1.5rem;  /* 24px */
	--tdeck-space-8: 2rem;    /* 32px */
	--tdeck-space-10: 2.5rem; /* 40px */
	--tdeck-space-12: 3rem;   /* 48px */
	--tdeck-space-16: 4rem;   /* 64px */

	/* ------------------------------ */
	/* UI Primitives
	/* ------------------------------ */

	--tdeck-border-radius-sm: 4px;
	--tdeck-border-radius-md: 6px;
	--tdeck-border-radius-lg: 8px;
	--tdeck-border-radius-xl: 12px;
	--tdeck-border-radius-full: 9999px;

	--tdeck-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tdeck-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tdeck-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	--tdeck-transition-duration: 200ms;
	--tdeck-transition-timing: ease-in-out;

	/* KPI / stat tiles — one number scale across every view. */
	--tdeck-kpi-number-size: 24px;
	--tdeck-kpi-label-size: 10.5px;
	--tdeck-kpi-meta-size: 11px;

	/* Data tables — production density. Per-view CSS may override
	   (e.g. the Staff register keeps its own tighter scale). */
	--tdeck-table-font-size: 13px;
	--tdeck-table-th-font-size: 11px;
	--tdeck-table-pad-y: 8px;
	--tdeck-table-pad-x: 12px;
	--tdeck-table-min: 760px;

	/* Glass — floating chrome surfaces only (command bar, drawer head,
	   sticky bulk bar, mobile bar). Solid panels stay solid. */
	--tdeck-glass-background: rgba(255, 255, 255, 0.62);
	--tdeck-glass-border: rgba(255, 255, 255, 0.45);
	--tdeck-glass-blur: blur(14px) saturate(1.4);

	/* Modal / menu overlay scrims. */
	--tdeck-scrim-background: rgba(3, 12, 22, 0.55);
	--tdeck-scrim-blur: blur(5px);
}

/* ------------------------------ */
/* Liquid Glass Effect
/* ------------------------------ */
.liquid-glass {
	background-color: var(--tdeck-glass-background);
	backdrop-filter: var(--tdeck-glass-blur);
	-webkit-backdrop-filter: var(--tdeck-glass-blur);
	border: 1px solid var(--tdeck-glass-border);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.liquid-glass {
		background-color: var(--tdeck-ui-surface);
		border-color: var(--tdeck-ui-border);
	}
}

/* ------------------------------ */
/* Legacy variable aliases
/*
/* Pre-v0.6 CSS references these names (they were injected per-request
/* from Theme Lab settings in portal.php). They now resolve to the
/* tokens above so the whole portal draws from one palette. Retire an
/* alias once no stylesheet references its name any more.
/* ------------------------------ */
:root {
	--tdeck-primary: var(--tdeck-brand-accent);
	--tdeck-secondary: var(--tdeck-brand-accent);
	--tdeck-button-text: var(--tdeck-brand-contrast);

	--tdeck-topbar-bg: var(--tdeck-ui-surface);
	--tdeck-topbar-mid: var(--tdeck-ui-surface);
	--tdeck-topbar-accent: var(--tdeck-ui-surface);
	--tdeck-topbar-text: var(--tdeck-ui-primary-text);
	--tdeck-topbar-muted: var(--tdeck-ui-secondary-text);

	--tdeck-bg-start: var(--tdeck-ui-background);
	--tdeck-bg-mid: var(--tdeck-ui-background);
	--tdeck-bg-surface: var(--tdeck-ui-background);
	--tdeck-sidebar-top: var(--tdeck-ui-surface);
	--tdeck-sidebar-bottom: var(--tdeck-ui-surface);

	--tdeck-panel-bg: var(--tdeck-ui-surface);
	--tdeck-panel-alt-bg: var(--tdeck-ui-divider);
	--tdeck-panel-alt: var(--tdeck-ui-divider);
	--tdeck-panel-text: var(--tdeck-ui-primary-text);
	--tdeck-muted-text: var(--tdeck-ui-secondary-text);
	--tdeck-muted: var(--tdeck-ui-secondary-text);
	--tdeck-border: var(--tdeck-ui-border);
	--tdeck-input-bg: var(--tdeck-ui-surface);

	--tdeck-danger: var(--tdeck-danger-text);
	--tdeck-warning: var(--tdeck-warning-text);
	--tdeck-success: var(--tdeck-success-text);

	--tdeck-calendar-bg: var(--tdeck-ui-surface);
	--tdeck-calendar-cell: var(--tdeck-ui-divider);

	/* Calendar tone rules (WP-08). Dedicated tokens for the session / due-soon /
	   expired event colours so the planning calendar can be retinted from the
	   Theme Lab independently of the global alert palette. Each defaults to the
	   matching brand/alert token, so it keeps following the brand until a tenant
	   overrides it (TDECK_Branding injects a :root override only when changed). */
	--tdeck-calendar-tone-session: var(--tdeck-brand-accent);
	--tdeck-calendar-tone-soon: var(--tdeck-warning-text);
	--tdeck-calendar-tone-expired: var(--tdeck-danger-text);
}