/**
 * Kimbodo Admin UI — canonical design tokens.
 * Light default on :root; dark on html.kimbodo-portal--dark and wp-admin Kimbodo screens.
 */

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

	--color-bg: #f6f7fb;
	--color-surface: #ffffff;
	--color-surface-muted: #f1f3f9;
	--color-surface-alt: #eceef6;
	--color-border: #e7eaf2;
	--color-border-strong: #d6dbe8;
	--color-text: #0f1222;
	--color-text-muted: #5b6474;
	--color-text-soft: #98a1b3;
	--color-primary: #5b4df5;
	--color-primary-hover: #4a3ce4;
	--color-primary-soft: #eeecfe;
	--color-primary-contrast: #ffffff;
	--color-accent-secondary: #2563eb;
	--color-success: #16a34a;
	--color-success-bg: #e7f8ee;
	--color-success-text: #157a3d;
	--color-warning: #d97706;
	--color-warning-bg: #fdf3e1;
	--color-warning-text: #a05a04;
	--color-danger: #dc2626;
	--color-danger-bg: #fdeded;
	--color-danger-text: #b91c1c;
	--color-info: #2563eb;
	--color-info-bg: #e8f0fe;
	--color-info-text: #1d4fd7;

	--color-hover-bg: rgba(15, 18, 34, 0.05);
	--color-active-nav-bg: var(--color-primary-soft);
	--color-input-bg: #ffffff;
	--color-input-border: #d6dbe8;
	--color-table-header-bg: #f3f5fa;
	--color-code-bg: #f1f3f9;
	--color-overlay: rgba(15, 18, 34, 0.5);
	--color-focus-ring: rgba(91, 77, 245, 0.32);

	--pill-success-bg: var(--color-success-bg);
	--pill-success-text: var(--color-success-text);
	--pill-warning-bg: var(--color-warning-bg);
	--pill-warning-text: var(--color-warning-text);
	--pill-danger-bg: var(--color-danger-bg);
	--pill-danger-text: var(--color-danger-text);
	--pill-info-bg: var(--color-info-bg);
	--pill-info-text: var(--color-info-text);
	--pill-neutral-bg: var(--color-surface-alt);
	--pill-neutral-text: var(--color-text-muted);
	--pill-accent-bg: var(--color-primary-soft);
	--pill-accent-text: var(--color-primary);

	--chart-1: #5b4df5;
	--chart-2: #2563eb;
	--chart-3: #16a34a;
	--chart-4: #d97706;
	--chart-5: #db2777;

	--shadow-card: 0 1px 2px rgba(15, 18, 34, 0.04), 0 1px 6px rgba(15, 18, 34, 0.04);
	--shadow-menu: 0 12px 32px rgba(15, 18, 34, 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-bg-hover: var(--color-hover-bg);
	--kp-bg-muted: rgba(15, 18, 34, 0.05);
	--kp-text: var(--color-text);
	--kp-text-muted: var(--color-text-muted);
	--kp-border: var(--color-border);
	--kp-input-bg: var(--color-input-bg);
	--kp-nav-active-bg: var(--color-active-nav-bg);
}

/* Shared dark palette: portal html class + always-dark wp-admin Kimbodo screens */
html.kimbodo-portal--dark,
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-scheme: dark;
	--color-bg: #0b0c14;
	--color-surface: #131522;
	--color-surface-muted: #1a1d2e;
	--color-surface-alt: #20233a;
	--color-border: #262a40;
	--color-border-strong: #343a57;
	--color-text: #f3f4fa;
	--color-text-muted: #a3abc0;
	--color-text-soft: #71798f;
	--color-primary: #7c6cff;
	--color-primary-hover: #9589ff;
	--color-primary-soft: rgba(124, 108, 255, 0.16);
	--color-primary-contrast: #ffffff;
	--color-accent-secondary: #3b9eff;
	--color-success: #34d399;
	--color-success-bg: rgba(52, 211, 153, 0.14);
	--color-success-text: #5eead4;
	--color-warning: #fbbf24;
	--color-warning-bg: rgba(251, 191, 36, 0.14);
	--color-warning-text: #fcd34d;
	--color-danger: #f87171;
	--color-danger-bg: rgba(248, 113, 113, 0.14);
	--color-danger-text: #fca5a5;
	--color-info: #60a5fa;
	--color-info-bg: rgba(96, 165, 250, 0.14);
	--color-info-text: #93c5fd;

	--color-hover-bg: rgba(255, 255, 255, 0.06);
	--color-active-nav-bg: rgba(124, 108, 255, 0.18);
	--color-input-bg: #171a2a;
	--color-input-border: #343a57;
	--color-table-header-bg: #171a2a;
	--color-code-bg: #171a2a;
	--color-overlay: rgba(4, 5, 10, 0.66);
	--color-focus-ring: rgba(124, 108, 255, 0.4);

	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-menu: 0 18px 44px rgba(0, 0, 0, 0.5);

	--kp-accent-mid: rgba(124, 108, 255, 0.24);
	--kp-bg-muted: rgba(255, 255, 255, 0.06);
}

html.kimbodo-portal--dark {
	color-scheme: dark;
}

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: var(--color-primary-contrast);
}

/* 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;
}