/* ==========================================================================
   Tokens do design system (frontend/DESIGN-SYSTEM.md)
   Toda cor, raio, sombra e tamanho das telas vem daqui. Mudou o visual? Mude o token.
   O tema escuro é o atributo data-bs-theme="dark" no <html> (theme.js).
   ========================================================================== */

:root {
    /* Marca (verde ChatsCentral). Texto branco só a partir do 700 (contraste AA). */
    --crm-brand-50: #ecfdf5;
    --crm-brand-100: #d1fae5;
    --crm-brand-200: #a7f3d0;
    --crm-brand-300: #6ee7b7;
    --crm-brand-400: #34d399;
    --crm-brand-500: #10b981;
    --crm-brand-600: #059669;
    --crm-brand-700: #047857;
    --crm-brand-800: #065f46;
    --crm-brand-900: #064e3b;
    --crm-brand: var(--crm-brand-500);
    --crm-brand-strong: var(--crm-brand-700);
    --crm-brand-strong-hover: var(--crm-brand-800);
    --crm-on-brand: #ffffff;
    --crm-brand-soft: var(--crm-brand-50);
    --crm-brand-soft-fg: var(--crm-brand-800);

    /* Superfícies e bordas */
    --crm-bg: #f6f7f9;
    --crm-surface: #ffffff;
    --crm-surface-2: #f8fafc;
    --crm-surface-hover: #f1f5f9;
    --crm-border: #e5e7eb;
    --crm-border-strong: #cbd5e1;

    /* Texto */
    --crm-text: #0f172a;
    --crm-text-2: #475569;
    --crm-text-3: #5f6e82;

    /* Estados: cor forte, fundo suave e texto sobre o fundo suave */
    --crm-success: #059669;
    --crm-success-bg: #ecfdf5;
    --crm-success-fg: #065f46;
    --crm-warning: #d97706;
    --crm-warning-bg: #fffbeb;
    --crm-warning-fg: #92400e;
    --crm-danger: #dc2626;
    --crm-danger-bg: #fef2f2;
    --crm-danger-fg: #991b1b;
    --crm-info: #2563eb;
    --crm-info-bg: #eff6ff;
    --crm-info-fg: #1e40af;
    --crm-neutral-bg: #f1f5f9;
    --crm-neutral-fg: #334155;

    /* Forma */
    --crm-radius-sm: 6px;
    --crm-radius: 10px;
    --crm-radius-lg: 14px;
    --crm-radius-pill: 999px;
    --crm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --crm-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .06);
    --crm-shadow-lg: 0 12px 32px rgba(15, 23, 42, .18);
    --crm-focus-ring: 0 0 0 3px rgba(16, 185, 129, .35);

    /* Espaço (escala de 4 px) */
    --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-7: 28px;
    --crm-space-8: 32px;

    /* Tipografia */
    --crm-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --crm-fs-xs: .75rem;
    --crm-fs-sm: .8125rem;
    --crm-fs-base: .875rem;
    --crm-fs-md: 1rem;
    --crm-fs-lg: 1.25rem;
    --crm-fs-xl: 1.5rem;
    --crm-fs-2xl: 1.875rem;

    /* WhatsApp (prévias de mensagem e chat) */
    --crm-wa-bg: #efeae2;
    --crm-wa-bubble: #d9fdd3;
    --crm-wa-bubble-in: #ffffff;
    --crm-wa-text: #111b21;

    /* Moldura */
    --crm-topbar-h: 60px;
    --crm-footer-h: 0px;
    --crm-sidebar-w: 250px;

    --crm-transition: .15s ease;
}

[data-bs-theme="dark"] {
    --crm-brand: var(--crm-brand-400);
    --crm-brand-strong: var(--crm-brand-500);
    --crm-brand-strong-hover: var(--crm-brand-400);
    --crm-on-brand: #04130d;
    --crm-brand-soft: rgba(16, 185, 129, .14);
    --crm-brand-soft-fg: var(--crm-brand-300);

    --crm-bg: #0b0f17;
    --crm-surface: #121826;
    --crm-surface-2: #161d2d;
    --crm-surface-hover: #1b2335;
    --crm-border: #243049;
    --crm-border-strong: #334260;

    --crm-text: #e5e7eb;
    --crm-text-2: #a8b3c7;
    --crm-text-3: #8392ab;

    --crm-success: #34d399;
    --crm-success-bg: rgba(52, 211, 153, .14);
    --crm-success-fg: #6ee7b7;
    --crm-warning: #fbbf24;
    --crm-warning-bg: rgba(251, 191, 36, .14);
    --crm-warning-fg: #fcd34d;
    --crm-danger: #f87171;
    --crm-danger-bg: rgba(248, 113, 113, .14);
    --crm-danger-fg: #fca5a5;
    --crm-info: #60a5fa;
    --crm-info-bg: rgba(96, 165, 250, .14);
    --crm-info-fg: #93c5fd;
    --crm-neutral-bg: rgba(148, 163, 184, .14);
    --crm-neutral-fg: #cbd5e1;

    --crm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --crm-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
    --crm-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
    --crm-focus-ring: 0 0 0 3px rgba(52, 211, 153, .4);

    --crm-wa-bg: #0b141a;
    --crm-wa-bubble: #005c4b;
    --crm-wa-bubble-in: #202c33;
    --crm-wa-text: #e9edef;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --crm-transition: 0s;
    }
}