/**
 * Kimbodo Admin UI — canonical design tokens (see docs/KimbodoAdminUI.md)
 * Light default on :root; dark on wp-admin Super Admin and portal dark mode.
 */

:root {
	--font-family: Inter, ui-sans-serif, system-ui, sans-serif;

	--color-bg: #f6f8fb;
	--color-surface: #ffffff;
	--color-surface-muted: #f9fafc;
	--color-border: #e5e9f0;
	--color-border-strong: #d7dde8;
	--color-text: #111827;
	--color-text-muted: #6b7280;
	--color-text-soft: #9ca3af;
	--color-primary: #5b4df5;
	--color-primary-hover: #493ee6;
	--color-primary-soft: #eef0ff;
	--color-accent-secondary: #2563eb;
	--color-success: #16a34a;
	--color-success-bg: #ecfdf3;
	--color-warning: #f59e0b;
	--color-warning-bg: #fff7e6;
	--color-danger: #dc2626;
	--color-danger-bg: #fef2f2;
	--shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
	--shadow-menu: 0 14px 34px rgba(15, 23, 42, 0.14);
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;

	--ann-sa-bg: var(--color-bg);
	--ann-sa-surface: var(--color-surface);
	--ann-sa-surface2: var(--color-surface-muted);
	--ann-sa-border: var(--color-border);
	--ann-sa-text: var(--color-text);
	--ann-sa-muted: var(--color-text-muted);
	--ann-sa-accent: var(--color-primary);
	--ann-sa-accent2: var(--color-accent-secondary);
	--ann-sa-success: var(--color-success);
	--ann-sa-danger: var(--color-danger);
	--ann-sa-radius: var(--radius-md);
	--ann-sa-shadow: var(--shadow-menu);
	--ann-sa-font: var(--font-family);

	--kp-font: var(--font-family);
	--kp-radius: 14px;
	--kp-radius-sm: 10px;
	--kp-accent: var(--color-primary);
	--kp-accent-soft: var(--color-primary-soft);
	--kp-accent-mid: rgba(91, 77, 245, 0.2);
	--kp-accent-bright: var(--color-primary-hover);
	--kp-shadow: var(--shadow-card);
	--kp-bg-shell: var(--color-bg);
	--kp-bg-sidebar: var(--color-surface);
	--kp-bg-main: var(--color-bg);
	--kp-bg-card: var(--color-surface);
	--kp-bg-card-tint: var(--color-surface-muted);
	--kp-text: var(--color-text);
	--kp-text-muted: var(--color-text-muted);
	--kp-border: var(--color-border);
	--kp-input-bg: var(--color-surface);
	--kp-nav-active-bg: var(--color-primary-soft);
}

/* wp-admin Kimbodo surfaces — dark default */
body.ann-sa-screen.wp-admin,
body.ann-cm-admin-screen.wp-admin,
body.ann-rm-admin-screen.wp-admin,
body.ann-lm-admin-screen.wp-admin,
body.ann-mm-admin-screen.wp-admin,
body.toplevel_page_ann-menu-manager.wp-admin,
body.toplevel_page_kimbodo-launch-dashboard.wp-admin {
	--color-bg: #0f1220;
	--color-surface: #171b2e;
	--color-surface-muted: #1d2238;
	--color-border: #2a3048;
	--color-border-strong: #3a425f;
	--color-text: #f8fafc;
	--color-text-muted: #aab3c5;
	--color-text-soft: #7f8ba3;
	--color-primary: #7c6cff;
	--color-primary-hover: #9589ff;
	--color-primary-soft: rgba(124, 108, 255, 0.14);
	--color-accent-secondary: #3b9eff;
	--color-success: #4ade80;
	--color-success-bg: rgba(74, 222, 128, 0.12);
	--color-warning: #fbbf24;
	--color-warning-bg: rgba(251, 191, 36, 0.12);
	--color-danger: #f87171;
	--color-danger-bg: rgba(248, 113, 113, 0.12);
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22);
	--shadow-menu: 0 18px 44px rgba(0, 0, 0, 0.42);

	--kp-accent-mid: rgba(124, 108, 255, 0.22);
}

/* Portal dark mode */
html.kimbodo-portal--dark {
	color-scheme: dark;
	--color-bg: #0f1220;
	--color-surface: #171b2e;
	--color-surface-muted: #1d2238;
	--color-border: #2a3048;
	--color-border-strong: #3a425f;
	--color-text: #f8fafc;
	--color-text-muted: #aab3c5;
	--color-text-soft: #7f8ba3;
	--color-primary: #7c6cff;
	--color-primary-hover: #9589ff;
	--color-primary-soft: rgba(124, 108, 255, 0.14);
	--color-accent-secondary: #3b9eff;
	--color-success: #4ade80;
	--color-success-bg: rgba(74, 222, 128, 0.12);
	--color-warning: #fbbf24;
	--color-warning-bg: rgba(251, 191, 36, 0.12);
	--color-danger: #f87171;
	--color-danger-bg: rgba(248, 113, 113, 0.12);
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22);
	--shadow-menu: 0 18px 44px rgba(0, 0, 0, 0.42);

	--kp-accent-mid: rgba(124, 108, 255, 0.22);
	--kp-nav-active-bg: rgba(255, 255, 255, 0.1);
}

html:not(.kimbodo-portal--dark) {
	color-scheme: light;
}

html.kimbodo-portal--dark .kimbodo-portal-skip {
	background: var(--color-text);
	color: var(--color-bg);
}

html:not(.kimbodo-portal--dark) .kimbodo-portal-skip {
	background: var(--color-primary);
	color: #fff;
}

/* Super Admin embed inside portal — transparent page bg, cards use surface tokens */
html:not(.kimbodo-portal--dark) body.kimbodo-portal-body .kimbodo-portal__ann-sa {
	--ann-sa-bg: transparent;
}

html.kimbodo-portal--dark body.kimbodo-portal-body .kimbodo-portal__ann-sa {
	--ann-sa-bg: transparent;
}