/**
 * Blockora Morph admin brand tokens.
 * Scoped to .joc-blockora-morph-app — change branding here only.
 * Source: JOC Blockora Morph brand palette (Indigo / Slate).
 */

.joc-blockora-morph-app {
	/* Colors — brand (main / container / surface) */
	--bm-color-primary: #3525cd;
	--bm-color-primary-container: #4f46e5;
	--bm-color-primary-surface: #eaedff;
	--bm-color-primary-interactive: #4f46e5;
	--bm-color-primary-soft: var(--bm-color-primary-surface);
	--bm-color-primary-soft-strong: color-mix(
		in srgb,
		var(--bm-color-primary) 14%,
		transparent
	);
	--bm-color-primary-fixed: #eaedff;
	--bm-color-primary-fixed-dim: #c3c0ff;
	--bm-color-on-primary: #ffffff;
	--bm-color-on-primary-container: #dad7ff;
	--bm-color-on-primary-fixed: #0f0069;
	--bm-color-on-primary-fixed-variant: #3323cc;
	--bm-color-inverse-primary: #c3c0ff;
	--bm-color-surface-tint: #4f46e5;

	--bm-color-secondary: #4648d4;
	--bm-color-secondary-container: #6a6be7;
	--bm-color-secondary-surface: #eef0ff;
	--bm-color-on-secondary: #ffffff;
	--bm-color-on-secondary-container: #fffbff;
	--bm-color-secondary-fixed: #eef0ff;
	--bm-color-secondary-fixed-dim: #c0c1ff;
	--bm-color-on-secondary-fixed: #07006c;
	--bm-color-on-secondary-fixed-variant: #2f2ebe;

	--bm-color-tertiary: #46494b;
	--bm-color-tertiary-container: #5e6163;
	--bm-color-on-tertiary: #ffffff;
	--bm-color-on-tertiary-container: #dadcde;

	--bm-color-surface: #faf8ff;
	--bm-color-surface-bg: #faf8ff;
	--bm-color-surface-dim: #d2d9f4;
	--bm-color-surface-bright: #faf8ff;
	--bm-color-surface-lowest: #ffffff;
	--bm-color-surface-low: #f2f3ff;
	--bm-color-surface-container: #eaedff;
	--bm-color-surface-high: #e2e7ff;
	--bm-color-surface-highest: #dae2fd;
	--bm-color-surface-variant: #dae2fd;
	--bm-color-on-surface: #131b2e;
	--bm-color-on-surface-variant: #464555;
	--bm-color-on-background: #131b2e;
	--bm-color-inverse-surface: #283044;
	--bm-color-inverse-on-surface: #eef0ff;

	--bm-color-outline: #777587;
	--bm-color-outline-muted: #c7c4d8;
	--bm-color-outline-variant: #c7c4d8;

	--bm-color-success: #16a34a;
	--bm-color-success-container: #4ade80;
	--bm-color-success-surface: #dcfce7;
	--bm-color-success-strong: #15803d;
	--bm-color-success-soft: var(--bm-color-success-surface);
	--bm-color-on-success: #ffffff;

	--bm-color-warning: #d97706;
	--bm-color-warning-container: #f59e0b;
	--bm-color-warning-surface: #fef3c7;
	--bm-color-warning-soft: var(--bm-color-warning-surface);
	--bm-color-on-warning: #ffffff;

	--bm-color-error: #ba1a1a;
	--bm-color-error-container: #dc2626;
	--bm-color-error-surface: #fee2e2;
	--bm-color-on-error: #ffffff;
	--bm-color-on-error-container: #ffffff;
	--bm-color-danger: var(--bm-color-error);
	--bm-color-danger-soft: var(--bm-color-error-surface);
	--bm-color-info: #4648d4;
	--bm-color-info-soft: var(--bm-color-secondary-surface);

	/* Typography */
	--bm-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Radii — brand rounded scale */
	--bm-radius-sm: 0.25rem;
	--bm-radius-md: 0.5rem;
	--bm-radius: 0.5rem;
	--bm-radius-lg: 1rem;
	--bm-radius-xl: 1.5rem;
	--bm-radius-pill: 9999px;

	/* Shadows — indigo ambient */
	--bm-shadow-sm: 0 1px 2px rgba(53, 37, 205, 0.04);
	--bm-shadow-card: 0 10px 25px -5px rgba(53, 37, 205, 0.08);
	--bm-shadow-section: 0 1px 2px rgba(53, 37, 205, 0.04),
		0 12px 28px -16px rgba(53, 37, 205, 0.14);
	--bm-shadow-modal: 0 12px 24px rgba(19, 27, 46, 0.1);

	/* Motion */
	--bm-ease: cubic-bezier(0.2, 0, 0, 1);
	--bm-duration: 0.2s;

	/* Spacing */
	--bm-space-gutter: 1.5rem;
	--bm-space-stack-sm: 0.5rem;
	--bm-space-stack-md: 1rem;
	--bm-space-stack-lg: 2rem;

	font-family: var(--bm-font-sans);
	color: var(--bm-color-on-surface);
	background: var(--bm-color-surface-bg);

	/* Legacy aliases used by admin.scss */
	--bm-primary: var(--bm-color-primary);
	--bm-primary-container: var(--bm-color-primary-container);
	--bm-primary-soft: var(--bm-color-primary-soft);
	--bm-on-surface: var(--bm-color-on-surface);
	--bm-on-surface-variant: var(--bm-color-on-surface-variant);
	--bm-surface-low: var(--bm-color-surface-low);
	--bm-surface-lowest: var(--bm-color-surface-lowest);
	--bm-ghost: color-mix(in srgb, var(--bm-color-outline-variant) 45%, transparent);
}

@media (max-width: 639px) {
	.joc-blockora-morph-app {
		--bm-space-gutter: 1rem;
		--bm-space-stack-lg: 1.25rem;
	}
}
