/**
 * TrevorSphere Design System — Tokens
 * Version: 5.4.0
 *
 * Single source of visual truth for admin UI, plugins, and Bricks.
 * Components use only these variables (via BEM). Context may override tokens;
 * structure and behaviour stay shared.
 *
 * Naming: --ts-{category}-{name}
 * Scales inspired by systematic design (Material-like states, Tailwind-like steps)
 * without shipping those frameworks.
 */

:root,
.trevorsphere-ui {
	/* ── Brand / accent ───────────────────────────────────────── */
	--ts-color-accent: #1a4f8a;
	--ts-color-accent-hover: #163f6e;
	--ts-color-accent-active: #0f2d4f;
	--ts-color-accent-soft: #dbeafe;
	--ts-color-accent-contrast: #ffffff;

	/* ── Neutrals (surfaces & text) ───────────────────────────── */
	--ts-color-neutral-25: #fafafa;
	--ts-color-neutral-50: #f5f5f5;
	--ts-color-neutral-100: #eeeeee;
	--ts-color-neutral-200: #e0e0e0;
	--ts-color-neutral-300: #bdbdbd;
	--ts-color-neutral-400: #9e9e9e;
	--ts-color-neutral-500: #757575;
	--ts-color-neutral-600: #616161;
	--ts-color-neutral-700: #424242;
	--ts-color-neutral-800: #303030;
	--ts-color-neutral-900: #212121;
	--ts-color-neutral-950: #121212;

	/* ── Semantic ─────────────────────────────────────────────── */
	--ts-color-success: #2e7d32;
	--ts-color-success-soft: #e8f5e9;
	--ts-color-warning: #ed6c02;
	--ts-color-warning-soft: #fff3e0;
	--ts-color-danger: #c62828;
	--ts-color-danger-soft: #ffebee;
	--ts-color-info: #0277bd;
	--ts-color-info-soft: #e1f5fe;

	/* ── Admin chrome ─────────────────────────────────────────── */
	--ts-color-header-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
	--ts-color-header-text: #ffffff;
	--ts-color-header-muted: rgba(255, 255, 255, 0.65);
	--ts-color-page-bg: #f0f2f5;
	--ts-color-surface: #ffffff;
	--ts-color-surface-alt: #f8fafc;
	--ts-color-surface-hover: #f1f5f9;
	--ts-color-border: #e2e8f0;
	--ts-color-border-strong: #cbd5e1;
	--ts-color-text: #1a202c;
	--ts-color-text-secondary: #475569;
	--ts-color-text-muted: #64748b;
	--ts-color-focus-ring: rgba(26, 79, 138, 0.45);

	/* ── Spacing scale (4px base) ─────────────────────────────── */
	--ts-space-3xs: 0.125rem; /* 2 */
	--ts-space-2xs: 0.25rem;  /* 4 */
	--ts-space-xs: 0.5rem;    /* 8 */
	--ts-space-s: 0.75rem;    /* 12 */
	--ts-space-m: 1rem;       /* 16 */
	--ts-space-l: 1.5rem;     /* 24 */
	--ts-space-xl: 2rem;      /* 32 */
	--ts-space-2xl: 2.5rem;   /* 40 */
	--ts-space-3xl: 3rem;     /* 48 */
	--ts-space-4xl: 4rem;     /* 64 */
	--ts-gap: var(--ts-space-l);

	/* ── Radius ───────────────────────────────────────────────── */
	--ts-radius-xs: 2px;
	--ts-radius-sm: 4px;
	--ts-radius: 8px;
	--ts-radius-md: 8px;
	--ts-radius-lg: 12px;
	--ts-radius-xl: 16px;
	--ts-radius-full: 9999px;

	/* ── Type ─────────────────────────────────────────────────── */
	--ts-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--ts-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--ts-text-xs: 0.75rem;
	--ts-text-sm: 0.8125rem;
	--ts-text-md: 0.875rem;
	--ts-text-base: 1rem;
	--ts-text-lg: 1.125rem;
	--ts-text-xl: 1.25rem;
	--ts-text-2xl: 1.5rem;
	--ts-leading-tight: 1.25;
	--ts-leading-normal: 1.5;
	--ts-leading-relaxed: 1.65;
	--ts-weight-regular: 400;
	--ts-weight-medium: 500;
	--ts-weight-semibold: 600;
	--ts-weight-bold: 700;

	/* ── Elevation ────────────────────────────────────────────── */
	--ts-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
	--ts-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
	--ts-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
	--ts-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
	--ts-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
	--ts-shadow-header: 0 4px 20px rgba(0, 0, 0, 0.25);

	/* ── Motion ───────────────────────────────────────────────── */
	--ts-duration-fast: 120ms;
	--ts-duration: 200ms;
	--ts-duration-slow: 350ms;
	--ts-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--ts-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

	/* ── Control sizes ────────────────────────────────────────── */
	--ts-control-height-sm: 2rem;
	--ts-control-height: 2.25rem;
	--ts-control-height-lg: 2.75rem;
	--ts-icon-size: 1.25rem;

	/* ── Legacy bridge (--bp-* used by existing admin CSS) ───── */
	--bp-accent: var(--ts-color-accent);
	--bp-accent-dark: var(--ts-color-accent-hover);
	--bp-accent-light: var(--ts-color-accent-soft);
	--bp-accent-grad: linear-gradient(135deg, var(--ts-color-accent) 0%, var(--ts-color-accent-active) 100%);
	--bp-header-bg: var(--ts-color-header-bg);
	--bp-header-text: var(--ts-color-header-text);
	--bp-header-sub: var(--ts-color-header-muted);
	--bp-bg: var(--ts-color-page-bg);
	--bp-surface: var(--ts-color-surface);
	--bp-surface-alt: var(--ts-color-surface-alt);
	--bp-surface-hover: var(--ts-color-surface-hover);
	--bp-border: var(--ts-color-border);
	--bp-border-strong: var(--ts-color-border-strong);
	--bp-radius-sm: var(--ts-radius-sm);
	--bp-radius: var(--ts-radius);
	--bp-radius-lg: var(--ts-radius-lg);
	--bp-text: var(--ts-color-text);
	--bp-text-secondary: var(--ts-color-text-secondary);
	--bp-text-muted: var(--ts-color-text-muted);
	--bp-shadow: var(--ts-shadow);
	--bp-gap: var(--ts-gap);
	--bp-danger: var(--ts-color-danger);
	--bp-success: var(--ts-color-success);
	--bp-warning: var(--ts-color-warning);
	--bp-info: var(--ts-color-info);
}

/* Optional Bricks alias bridge when front-end tokens exist */
:root {
	--ts-bricks-space-m: var(--brxw-space-m, var(--ts-space-m));
	--ts-bricks-space-l: var(--brxw-space-l, var(--ts-space-l));
	--ts-bricks-radius-m: var(--brxw-radius-m, var(--ts-radius-md));
	--ts-bricks-text-m: var(--brxw-text-m, var(--ts-text-base));
}

@media (prefers-reduced-motion: reduce) {
	:root,
	.trevorsphere-ui {
		--ts-duration-fast: 0ms;
		--ts-duration: 0ms;
		--ts-duration-slow: 0ms;
	}
}