/**
 * Design tokens — sourced from vi.game3d.bet theme/palette.ts + components
 * Reference audit: _theme-rebuild/reference/DESIGN-SYSTEM.md
 */

:root {
	/* Background layers (dark mode — reference default) */
	--color-bg-site: #070f1e;
	--color-bg-layer1: #0e1627;
	--color-bg-layer2: #141d30;
	--color-bg-layer3: #1b253a;
	--color-bg-layer4: #222d44;
	--color-bg-layer5: #29354e;
	--color-bg-layer6: #303e58;
	--color-border: #1e2738;
	--color-sidebar-cell: #141d30;
	--color-sidebar-cell-expanded: #1b253a;

	/* Brand — primary cyan (reference PRIMARY.main) */
	--color-primary: #00bae6;
	--color-primary-light: #58d6ff;
	--color-primary-dark: #006c9c;

	/* Accent green (reference ColorButton + sidebar active) */
	--color-accent-start: #24ee89;
	--color-accent-end: #9fe871;
	--color-accent-active-fade: rgba(35, 238, 136, 0.2);
	--color-accent-hover: #22e9a7;

	/* Text */
	--color-text: #ffffff;
	--color-text-secondary: #919eab;
	--color-text-disabled: #637381;

	/* Layout dimensions — config/constant.ts + header/index.tsx + Wrapper.tsx */
	--header-height: 70px;
	--header-max-width: 1600px;
	--sidebar-width: 240px;
	--sidebar-collapsed: 72px;
	--content-max-width: 1248px;
	--tabbar-height: 70px;
	--nav-item-height: 40px;

	/* Typography — Public Sans fallback (AvertaStd license not verified) */
	--font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;

	/* Spacing — MUI spacing unit 8px */
	--space-unit: 8px;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;

	/* Radius — theme.shape.borderRadius = 4px; cards use ×2 = 8px */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-tabbar: 0 4px 12px rgba(0, 0, 0, 0.35);
	--shadow-cta: rgba(35, 238, 136, 0.3) 0 0 12px, rgb(29, 202, 106) 0 -2px inset;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;

	/* Z-index */
	--z-sidebar: 1200;
	--z-header: 1201;
	--z-drawer: 1300;
	--z-tabbar: 1300;

	/* Focus */
	--focus-ring: 0 0 0 3px rgba(0, 186, 230, 0.45);

	/* Semantic aliases (Phase 26) */
	--color-bg: var(--color-bg-site);
	--color-surface: var(--color-bg-layer1);
	--color-surface-elevated: var(--color-bg-layer2);
	--color-primary-hover: var(--color-primary-light);
	--color-cta: var(--color-accent-start);
	--color-cta-hover: var(--color-accent-hover);
	--color-text-muted: var(--color-text-disabled);
	--shadow-card: var(--shadow-tabbar);
	--radius-card: var(--radius-md);

	/* BJ66 token aliases (Phase 27.4) */
	--bj-bg: var(--color-bg-site);
	--bj-surface: var(--color-bg-layer4);
	--bj-surface-hover: var(--color-bg-layer5);
	--bj-surface-active: var(--color-sidebar-cell-expanded);
	--bj-border: var(--color-border);
	--bj-text: var(--color-text);
	--bj-muted: var(--color-text-secondary);
	--bj-cyan: var(--color-primary);
	--bj-green: var(--color-accent-start);
}