/* Ponte Kleiciane Rocha → NossoCRM (Tailwind 4 com --color-*). Importe DEPOIS de kr-tokens.css; substitui o @theme de primary/dark e os blocos :root/.dark de --color-*. */
@import "./kr-tokens.css";

@theme {
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --color-primary-50: #FBF6F4;
  --color-primary-100: #F3E7E3;
  --color-primary-200: #ECD0C9;
  --color-primary-300: #E4B9B0;
  --color-primary-400: #BE9798;
  --color-primary-500: #9A7781;
  --color-primary-600: #77586A;
  --color-primary-700: #624656;
  --color-primary-800: #4E3542;
  --color-primary-900: #3A2430;
  --color-dark-bg: #241620;
  --color-dark-card: #2D1C28;
  --color-dark-border: #4B3640;
  --color-dark-hover: #37232F;
}

:root {
  --color-bg: var(--kr-fundo);
  --color-surface: var(--kr-superficie);
  --color-muted: var(--kr-superficie-2);
  --color-border: var(--kr-borda-controle);
  --color-border-subtle: var(--kr-linha);
  --color-text-primary: var(--kr-texto);
  --color-text-secondary: var(--kr-texto-2);
  --color-text-muted: var(--kr-texto-3);
  --color-text-subtle: var(--kr-texto-3);
  --color-success: var(--kr-sucesso);
  --color-success-hover: var(--kr-sucesso);
  --color-success-bg: var(--kr-sucesso-fundo);
  --color-success-text: var(--kr-sucesso);
  --color-warning: var(--kr-atencao);
  --color-warning-hover: var(--kr-atencao);
  --color-warning-bg: var(--kr-atencao-fundo);
  --color-warning-text: var(--kr-atencao);
  --color-error: var(--kr-critico);
  --color-error-hover: var(--kr-critico);
  --color-error-bg: var(--kr-critico-fundo);
  --color-error-text: var(--kr-critico);
  --color-info: var(--kr-acao);
  --color-info-hover: var(--kr-acao-hover);
  --color-info-bg: var(--kr-realce);
  --color-info-text: var(--kr-sobre-realce);
  --primary: var(--kr-acao);
  --primary-foreground: var(--kr-sobre-acao);
  --destructive: var(--kr-critico);
  --ring: var(--kr-foco);
  --background: var(--kr-fundo);
  --foreground: var(--kr-texto);
  --border: var(--kr-linha);
  --input: var(--kr-borda-controle);
  --secondary: var(--kr-realce);
  --secondary-foreground: var(--kr-sobre-realce);
  --muted: var(--kr-superficie-2);
  --muted-foreground: var(--kr-texto-2);
  --accent: var(--kr-realce);
  --accent-foreground: var(--kr-sobre-realce);
}

.dark {
  --color-bg: var(--kr-fundo);
  --color-surface: var(--kr-superficie);
  --color-muted: var(--kr-superficie-2);
  --color-border: var(--kr-borda-controle);
  --color-border-subtle: var(--kr-linha);
  --color-text-primary: var(--kr-texto);
  --color-text-secondary: var(--kr-texto-2);
  --color-text-muted: var(--kr-texto-3);
  --color-text-subtle: var(--kr-texto-3);
  --color-success: var(--kr-sucesso);
  --color-success-hover: var(--kr-sucesso);
  --color-success-bg: var(--kr-sucesso-fundo);
  --color-success-text: var(--kr-sucesso);
  --color-warning: var(--kr-atencao);
  --color-warning-hover: var(--kr-atencao);
  --color-warning-bg: var(--kr-atencao-fundo);
  --color-warning-text: var(--kr-atencao);
  --color-error: var(--kr-critico);
  --color-error-hover: var(--kr-critico);
  --color-error-bg: var(--kr-critico-fundo);
  --color-error-text: var(--kr-critico);
  --color-info: var(--kr-acao);
  --color-info-hover: var(--kr-acao-hover);
  --color-info-bg: var(--kr-realce);
  --color-info-text: var(--kr-sobre-realce);
  --primary: var(--kr-acao);
  --primary-foreground: var(--kr-sobre-acao);
  --destructive: var(--kr-critico);
  --ring: var(--kr-foco);
  --background: var(--kr-fundo);
  --foreground: var(--kr-texto);
  --border: var(--kr-linha);
  --input: var(--kr-borda-controle);
  --secondary: var(--kr-realce);
  --secondary-foreground: var(--kr-sobre-realce);
  --muted: var(--kr-superficie-2);
  --muted-foreground: var(--kr-texto-2);
  --accent: var(--kr-realce);
  --accent-foreground: var(--kr-sobre-realce);
}

/* O efeito de vidro (--glass-*) sai: a marca é plana. Mapeie para superfície chapada. */
:root, .dark {
  --glass-bg: var(--kr-superficie);
  --glass-border: var(--kr-linha);
  --glass-blur: 0px;
}