/*
 * Tokens de design do CRM Impactei.
 *
 * Valores de cinza, espaçamento, raio, sombra e paleta de tags baseados na
 * especificação visual do kanban do Twenty (docs/referencia/KANBAN-UI-SPEC.md).
 * A cor de destaque é a da marca Impactei (#6257F7) no lugar do azul do Twenty.
 */

:root {
	/* Marca */
	--crm-brand: #6257f7;
	--crm-brand-hover: #5046e5;
	--crm-brand-soft: #efeefe;
	--crm-brand-softer: #f7f7ff;
	--crm-brand-border: #c3befb;

	/* Fundos */
	--crm-bg-primary: #ffffff;
	--crm-bg-secondary: #fcfcfc;
	--crm-bg-tertiary: #f1f1f1;
	--crm-bg-quaternary: #ebebeb;
	--crm-bg-app: #fafafd;
	--crm-bg-chrome: #17171c;
	--crm-bg-hover: rgba(0, 0, 0, 0.039);
	--crm-bg-hover-strong: rgba(0, 0, 0, 0.078);

	/* Bordas */
	--crm-border-strong: #d6d6d6;
	--crm-border-medium: #ebebeb;
	--crm-border-light: #f1f1f1;

	/* Texto */
	--crm-text-primary: #333333;
	--crm-text-secondary: #666666;
	--crm-text-tertiary: #999999;
	--crm-text-light: #b3b3b3;
	--crm-text-on-chrome: #ebebeb;
	--crm-text-on-brand: #ffffff;

	/* Estados */
	--crm-danger: #ce2c31;
	--crm-danger-soft: #feebec;
	--crm-success: #00824d;
	--crm-success-soft: #e6f6eb;

	/* Tipografia (base 13px como o Twenty) */
	--crm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--crm-font-size-xs: 11px;
	--crm-font-size-sm: 12px;
	--crm-font-size-md: 13px;
	--crm-font-size-lg: 16px;
	--crm-font-size-xl: 20px;
	--crm-font-size-xxl: 24px;
	--crm-weight-regular: 400;
	--crm-weight-medium: 500;
	--crm-weight-semibold: 600;

	/* Espaçamento: múltiplos de 4px */
	--crm-space-1: 4px;
	--crm-space-2: 8px;
	--crm-space-3: 12px;
	--crm-space-4: 16px;
	--crm-space-5: 20px;
	--crm-space-6: 24px;
	--crm-space-8: 32px;

	/* Raios */
	--crm-radius-xs: 2px;
	--crm-radius-sm: 4px;
	--crm-radius-md: 8px;
	--crm-radius-lg: 16px;

	/* Sombras */
	--crm-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.039), 0 0 4px rgba(0, 0, 0, 0.078);
	--crm-shadow-strong: 2px 4px 16px rgba(0, 0, 0, 0.161), 0 2px 4px rgba(0, 0, 0, 0.078);

	/* Animação */
	--crm-duration-fast: 0.15s;
	--crm-duration-normal: 0.3s;

	/* Kanban */
	--crm-board-column-width: 272px;
	--crm-topbar-height: 56px;

	/* Paleta de tags (fundo / texto) */
	--crm-tag-gray-bg: #f9f9f9;      --crm-tag-gray-text: #666666;
	--crm-tag-blue-bg: #edf2fe;      --crm-tag-blue-text: #3a5bc7;
	--crm-tag-green-bg: #e6f6eb;     --crm-tag-green-text: #00824d;
	--crm-tag-red-bg: #feebec;       --crm-tag-red-text: #ce2c31;
	--crm-tag-orange-bg: #ffefd6;    --crm-tag-orange-text: #d14e00;
	--crm-tag-yellow-bg: #fffab8;    --crm-tag-yellow-text: #a06e00;
	--crm-tag-purple-bg: #f7edfd;    --crm-tag-purple-text: #8145b5;
	--crm-tag-pink-bg: #fee9f6;      --crm-tag-pink-text: #c1298a;
	--crm-tag-turquoise-bg: #e0f8f3; --crm-tag-turquoise-text: #00826d;
	--crm-tag-sky-bg: #e1f6fd;       --crm-tag-sky-text: #00749e;
}