/*
 * Tokens de design do APP 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.
 *
 * Fonte Inter (variável, pesos 100–900) servida pelo próprio tema, licença
 * SIL OFL 1.1 (assets/fonts/LICENSE-Inter.txt). Sem ela, cada computador
 * caía na fonte do sistema e os campos nativos (select) podiam sair diferentes.
 */

@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

	/* 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-chrome-hover: rgba(255, 255, 255, 0.102);
	--crm-chrome-border: rgba(255, 255, 255, 0.141);
	--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-chrome-strong: #ffffff;
	--crm-text-on-brand: #ffffff;

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

	/* Tipografia (base 14px) */
	--crm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--crm-font-size-xs: 12px;
	--crm-font-size-sm: 13px;
	--crm-font-size-md: 14px;
	--crm-font-size-lg: 17px;
	--crm-font-size-xl: 21px;
	--crm-font-size-xxl: 25px;
	--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);
	--crm-shadow-sticky: 4px 0 6px -4px rgba(0, 0, 0, 0.12);
	--crm-overlay: rgba(0, 0, 0, 0.32);

	/* 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-alerta: #c2410c;
	--crm-alerta-hover: #9a3412;
	--crm-alerta-texto: #ffffff;
	--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;

	/* Amostras das cores do painel (menu de aparência, Fase 2.22) */
	--crm-cor-impactei: #6257f7;
	--crm-cor-azul: #2563eb;
	--crm-cor-verde: #0f766e;
	--crm-cor-grafite: #3f3f46;
	--crm-cor-amarelo: #facc15;
	--crm-cor-rosa: #e6007e;

	/* Botões de marca de terceiros (agenda da captação): cores das diretrizes
	   do Google (botão claro) e da Apple (botão preto). Iguais nos dois temas. */
	--crm-marca-google-bg: #ffffff;
	--crm-marca-google-bg-hover: #f2f2f2;
	--crm-marca-google-borda: #747775;
	--crm-marca-google-texto: #1f1f1f;
	--crm-marca-apple-bg: #000000;
	--crm-marca-apple-bg-hover: #333333;
	--crm-marca-apple-borda: #000000;
	--crm-marca-apple-texto: #ffffff;

	color-scheme: light;
}

/*
 * Fase 2.22: tema escuro (docs/FASE-2-22-TEMA-E-CORES.md, seção 8).
 * Mesmas chaves do :root; o <html> recebe data-theme="dark" do script do
 * <head> (inc/ui/tema.php). Contraste AA conferido sobre --crm-bg-primary.
 */
:root[data-theme="dark"] {
	/* Marca (Impactei): fundo do botão igual, texto mais claro */
	--crm-brand: #6257f7;
	--crm-brand-hover: #7168f8;
	--crm-brand-soft: #25234a;
	--crm-brand-softer: #1e1d36;
	--crm-brand-border: #4a43a8;
	--crm-brand-text: #a59fff;

	/* Fundos */
	--crm-bg-primary: #1c1c21;
	--crm-bg-secondary: #202026;
	--crm-bg-tertiary: #2a2a31;
	--crm-bg-quaternary: #33333b;
	--crm-bg-app: #141418;
	--crm-bg-chrome: #0e0e12;
	--crm-bg-hover: rgba(255, 255, 255, 0.051);
	--crm-bg-hover-strong: rgba(255, 255, 255, 0.09);
	--crm-chrome-hover: rgba(255, 255, 255, 0.09);
	--crm-chrome-border: rgba(255, 255, 255, 0.141);

	/* Bordas */
	--crm-border-strong: #45454f;
	--crm-border-medium: #34343c;
	--crm-border-light: #2a2a31;

	/* Texto */
	--crm-text-primary: #e8e8ec;
	--crm-text-secondary: #a9a9b3;
	--crm-text-tertiary: #9696a1;
	--crm-text-light: #85858f;
	--crm-text-on-chrome: #ebebeb;
	--crm-text-on-chrome-strong: #ffffff;
	--crm-text-on-brand: #ffffff;

	/* Estados */
	--crm-danger: #ff6369;
	--crm-danger-soft: #3b1a1d;
	--crm-success: #3dd68c;
	--crm-success-soft: #132d21;

	/* Sombras */
	--crm-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.32), 0 0 4px rgba(0, 0, 0, 0.4);
	--crm-shadow-strong: 2px 4px 16px rgba(0, 0, 0, 0.56), 0 2px 4px rgba(0, 0, 0, 0.4);
	--crm-shadow-sticky: 4px 0 6px -4px rgba(0, 0, 0, 0.6);
	--crm-overlay: rgba(0, 0, 0, 0.6);

	/* Paleta de tags (fundo escuro tingido / texto claro tingido) */
	--crm-tag-gray-bg: #2a2a31;      --crm-tag-gray-text: #b4b4bd;
	--crm-tag-blue-bg: #1d2a4d;      --crm-tag-blue-text: #9db4ff;
	--crm-tag-green-bg: #133024;     --crm-tag-green-text: #5fd3a0;
	--crm-tag-red-bg: #3b1a1d;       --crm-tag-red-text: #ff8f94;
	--crm-tag-orange-bg: #3a2412;    --crm-tag-orange-text: #ffa565;
	--crm-alerta: #c2410c;
	--crm-alerta-hover: #9a3412;
	--crm-alerta-texto: #ffffff;
	--crm-tag-yellow-bg: #33290b;    --crm-tag-yellow-text: #f0c541;
	--crm-tag-purple-bg: #2e1d40;    --crm-tag-purple-text: #c9a2f0;
	--crm-tag-pink-bg: #3a1830;      --crm-tag-pink-text: #f58bcc;
	--crm-tag-turquoise-bg: #0f302b; --crm-tag-turquoise-text: #4fd6bd;
	--crm-tag-sky-bg: #0c2a38;       --crm-tag-sky-text: #5cc8ef;

	/* Amostras: a de grafite clareia para aparecer no fundo escuro */
	--crm-cor-grafite: #71717a;

	/* Botão da Apple: contorno claro para o preto aparecer no fundo escuro */
	--crm-marca-apple-borda: #5c5c66;

	color-scheme: dark;
}

/* Cores do painel (data-cor no <html>): só os tokens de marca mudam. */
:root[data-cor="azul"] {
	--crm-brand: #2563eb;
	--crm-brand-hover: #1d4ed8;
	--crm-brand-soft: #eaf1fe;
	--crm-brand-softer: #f5f8ff;
	--crm-brand-border: #b9cffb;
	--crm-brand-text: #2563eb;
}

:root[data-cor="verde"] {
	--crm-brand: #0f766e;
	--crm-brand-hover: #0b5f58;
	--crm-brand-soft: #e6f4f2;
	--crm-brand-softer: #f3faf9;
	--crm-brand-border: #a7d8d2;
	--crm-brand-text: #0f766e;
}

:root[data-cor="grafite"] {
	--crm-brand: #3f3f46;
	--crm-brand-hover: #27272a;
	--crm-brand-soft: #ededef;
	--crm-brand-softer: #f6f6f7;
	--crm-brand-border: #c8c8ce;
	--crm-brand-text: #3f3f46;
}

:root[data-cor="amarelo"] {
	/* Amarelo claro demais para texto branco: o texto sobre o destaque fica escuro (11,4:1). */
	--crm-brand: #facc15;
	--crm-brand-hover: #eab308;
	--crm-brand-soft: #fef9c3;
	--crm-brand-softer: #fefce8;
	--crm-brand-border: #fde68a;
	--crm-brand-text: #a16207;
	--crm-text-on-brand: #1c1917;
}

:root[data-cor="rosa"] {
	--crm-brand: #e6007e;
	--crm-brand-hover: #c8006a;
	--crm-brand-soft: #fde7f3;
	--crm-brand-softer: #fff4fa;
	--crm-brand-border: #f8b4d9;
	--crm-brand-text: #d6006f;
}

:root[data-theme="dark"][data-cor="azul"] {
	--crm-brand: #2563eb;
	--crm-brand-hover: #3b76f0;
	--crm-brand-soft: #172647;
	--crm-brand-softer: #141d33;
	--crm-brand-border: #2f4f99;
	--crm-brand-text: #8ab4ff;
}

:root[data-theme="dark"][data-cor="verde"] {
	--crm-brand: #0f766e;
	--crm-brand-hover: #138a80;
	--crm-brand-soft: #0f2d2a;
	--crm-brand-softer: #0e2220;
	--crm-brand-border: #1f5e57;
	--crm-brand-text: #5fd4c4;
}

:root[data-theme="dark"][data-cor="grafite"] {
	--crm-brand: #71717a;
	--crm-brand-hover: #63636d;
	--crm-brand-soft: #2b2b31;
	--crm-brand-softer: #222227;
	--crm-brand-border: #5a5a63;
	--crm-brand-text: #d4d4d8;
}

:root[data-theme="dark"][data-cor="amarelo"] {
	--crm-brand: #facc15;
	--crm-brand-hover: #fde047;
	--crm-brand-soft: #3a3110;
	--crm-brand-softer: #2b250d;
	--crm-brand-border: #6b5a12;
	--crm-brand-text: #fde047;
	--crm-text-on-brand: #1c1917;
}

:root[data-theme="dark"][data-cor="rosa"] {
	--crm-brand: #e6007e;
	--crm-brand-hover: #ff1a8c;
	--crm-brand-soft: #3d1029;
	--crm-brand-softer: #2c0c1e;
	--crm-brand-border: #8a1557;
	--crm-brand-text: #ff5cad;
}