/**
 * CCD Hub Cloud — Design tokens (light theme, dark-mode ready).
 * Shared by Customer Portal + Admin SaaS chrome.
 */

:root,
.ccd-saas-theme,
.ccd-portal,
.ccd-hub-cloud-admin {
	/* Brand */
	--ccd-color-brand: #0b6bcb;
	--ccd-color-brand-strong: #0a4f96;
	--ccd-color-brand-soft: #e8f2fc;

	/* Surfaces */
	--ccd-color-bg: #f5f7fb;
	--ccd-color-surface: #ffffff;
	--ccd-color-surface-2: #f8fafc;
	--ccd-color-border: #e6ebf2;
	--ccd-color-border-strong: #d0d7e2;

	/* Text */
	--ccd-color-text: #0f172a;
	--ccd-color-text-secondary: #475569;
	--ccd-color-text-muted: #64748b;
	--ccd-color-text-inverse: #ffffff;

	/* Status */
	--ccd-color-success: #059669;
	--ccd-color-success-soft: #ecfdf5;
	--ccd-color-success-border: #a7f3d0;
	--ccd-color-info: #2563eb;
	--ccd-color-info-soft: #eff6ff;
	--ccd-color-info-border: #bfdbfe;
	--ccd-color-warning: #d97706;
	--ccd-color-warning-soft: #fffbeb;
	--ccd-color-warning-border: #fde68a;
	--ccd-color-danger: #dc2626;
	--ccd-color-danger-soft: #fef2f2;
	--ccd-color-danger-border: #fecaca;

	/* Elevation */
	--ccd-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--ccd-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
	--ccd-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.08);
	--ccd-shadow-focus: 0 0 0 3px rgba(11, 107, 203, 0.22);

	/* Radius */
	--ccd-radius-sm: 8px;
	--ccd-radius-md: 12px;
	--ccd-radius-lg: 16px;
	--ccd-radius-xl: 20px;
	--ccd-radius-pill: 999px;

	/* Spacing */
	--ccd-space-1: 4px;
	--ccd-space-2: 8px;
	--ccd-space-3: 12px;
	--ccd-space-4: 16px;
	--ccd-space-5: 20px;
	--ccd-space-6: 24px;
	--ccd-space-8: 32px;

	/* Type */
	--ccd-font-sans: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ccd-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--ccd-text-xs: 0.75rem;
	--ccd-text-sm: 0.8125rem;
	--ccd-text-md: 0.9375rem;
	--ccd-text-lg: 1.125rem;
	--ccd-text-xl: 1.5rem;
	--ccd-leading: 1.5;

	/* Motion */
	--ccd-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ccd-duration: 180ms;
	--ccd-duration-slow: 320ms;

	/* Compat aliases used by older SaaS admin CSS */
	--ccd-saas-card: var(--ccd-color-surface);
	--ccd-saas-line: var(--ccd-color-border);
	--ccd-saas-radius-lg: var(--ccd-radius-lg);
	--ccd-saas-shadow-sm: var(--ccd-shadow-xs);
	--ccd-saas-text: var(--ccd-color-text);
	--ccd-saas-muted: var(--ccd-color-text-muted);
}

/* Dark tokens reserved for a future toggle */
[data-ccd-theme="dark"] {
	--ccd-color-bg: #0b1220;
	--ccd-color-surface: #111827;
	--ccd-color-surface-2: #0f172a;
	--ccd-color-border: #1f2937;
	--ccd-color-border-strong: #334155;
	--ccd-color-text: #f8fafc;
	--ccd-color-text-secondary: #cbd5e1;
	--ccd-color-text-muted: #94a3b8;
	--ccd-color-brand-soft: #0c2340;
}