/* =========================================================================
 * Unbox Painel — Contrato público de tokens (PRD 3.1 §9)
 *
 * Esta é a superfície ESTÁVEL de estilo oferecida às extensões do ecossistema.
 * Um plugin integrado ao /painel/ consome `--ubp-*` e nunca os tokens internos
 * do Design System (`--or`, `--t1`, `--bg1`…), que podem ser renomeados sem
 * aviso.
 *
 * Cada token aqui é um ALIAS do token interno correspondente. Isso dá as duas
 * garantias que importam: o contrato público fica estável para fora, e o
 * design system existente continua valendo sem nenhuma regressão visual — a
 * `dashboard.css` de 58 KB não precisou ser tocada.
 *
 * Regra para extensões: use estes tokens; não redefina o Design System.
 * ====================================================================== */

.ubp-panel {

	/* ---------- Cor: marca ---------- */
	--ubp-color-primary: var(--or);
	--ubp-color-primary-hover: var(--or2);
	--ubp-color-primary-active: var(--or3);
	--ubp-color-primary-soft: var(--og);
	--ubp-color-primary-soft-strong: var(--og2);
	--ubp-color-on-primary: #ffffff;

	/* ---------- Cor: superfícies ---------- */
	--ubp-color-background: var(--bg0);
	--ubp-color-surface: var(--bg1);
	--ubp-color-surface-alt: var(--bg3);
	--ubp-color-surface-sunken: var(--bg4);

	/* ---------- Cor: texto ---------- */
	--ubp-color-text: var(--t1);
	--ubp-color-text-secondary: var(--t2);
	--ubp-color-muted: var(--t3);
	--ubp-color-subtle: var(--t4);

	/* ---------- Cor: bordas ---------- */
	--ubp-color-border: var(--b1);
	--ubp-color-border-strong: var(--b2);
	--ubp-color-border-stronger: var(--b3);

	/* ---------- Cor: estado ---------- */
	--ubp-color-info: var(--info);
	--ubp-color-success: var(--success);
	--ubp-color-warning: var(--warning);
	--ubp-color-danger: var(--danger);
	--ubp-color-critical: #b91c1c;

	/* Superfícies suaves de estado, para alertas e badges. */
	--ubp-color-info-soft: rgba(59, 130, 246, .12);
	--ubp-color-success-soft: rgba(34, 197, 94, .12);
	--ubp-color-warning-soft: rgba(245, 158, 11, .14);
	--ubp-color-danger-soft: rgba(239, 68, 68, .12);
	--ubp-color-critical-soft: rgba(185, 28, 28, .14);

	/* ---------- Tipografia ---------- */
	--ubp-font-display: var(--font-display);
	--ubp-font-text: var(--font-text);
	--ubp-font-mono: var(--font-mono);

	--ubp-text-xs: 12px;
	--ubp-text-sm: 13px;
	--ubp-text-base: 15px;
	--ubp-text-md: 16px;
	--ubp-text-lg: 19px;
	--ubp-text-xl: 23px;
	--ubp-text-2xl: 29px;

	--ubp-weight-regular: 400;
	--ubp-weight-medium: 500;
	--ubp-weight-semibold: 600;
	--ubp-weight-bold: 700;

	/* ---------- Raio ---------- */
	--ubp-radius-sm: 6px;
	--ubp-radius-md: var(--radius-control);
	--ubp-radius-lg: var(--radius-card);
	--ubp-radius-full: 999px;

	/* ---------- Sombra ---------- */
	--ubp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--ubp-shadow-md: var(--shadow-card);
	--ubp-shadow-lg: 0 18px 48px rgba(15, 23, 42, .14);

	/* ---------- Espaçamento (escala de 4px) ---------- */
	--ubp-space-0: 0;
	--ubp-space-1: 4px;
	--ubp-space-2: 8px;
	--ubp-space-3: 12px;
	--ubp-space-4: 16px;
	--ubp-space-5: 20px;
	--ubp-space-6: 24px;
	--ubp-space-8: 32px;
	--ubp-space-10: 40px;
	--ubp-space-12: 48px;

	/* ---------- Layout ---------- */
	--ubp-sidebar-width: var(--sidebar-w);
	--ubp-topbar-height: var(--topbar-h);
	--ubp-content-max: var(--content-max);
	--ubp-page-gap: var(--page-gap);

	/* ---------- Movimento ---------- */
	--ubp-transition-fast: 120ms ease;
	--ubp-transition-base: 180ms ease;

	/* ---------- Camadas ---------- */
	--ubp-z-dropdown: 100;
	--ubp-z-sticky: 200;
	--ubp-z-drawer: 300;
	--ubp-z-modal: 400;
	--ubp-z-toast: 500;
}

/* Quem pede menos movimento, recebe menos movimento. */
@media ( prefers-reduced-motion: reduce ) {

	.ubp-panel {
		--ubp-transition-fast: 0ms;
		--ubp-transition-base: 0ms;
	}
}