/* ──────────────────────────────────────────────────────────────────────
   Lasbot — Design tokens
   Fuente única de verdad para colores, espacios, tipografía y radios.
   Cargar este archivo en TODO layout (auth + app + landing).
   ────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Superficies ─────────────────────────────────────────────── */
    --bg-base:      #FFFFFF;
    --bg-subtle:    #F9FAFB;
    --bg-muted:     #F3F4F6;

    /* ── Texto ───────────────────────────────────────────────────── */
    --text:           #111827;
    --text-secondary: #4B5563;
    --text-tertiary:  #6B7280;
    --text-muted:     #6B7280;
    --text-faint:     #9CA3AF;

    /* ── Marca (azul Linear) ─────────────────────────────────────── */
    --accent-50:    #EFF6FF;
    --accent-100:   #DBEAFE;
    --accent-500:   #3B82F6;
    --accent-600:   #2563EB;
    --accent-700:   #1D4ED8;

    /* Aliases semánticos de marca (preferir estos en código nuevo) */
    --brand:        var(--accent-500);
    --brand-hover:  var(--accent-600);
    --brand-active: var(--accent-700);
    --brand-soft:   var(--accent-100);

    /* ── Estado ──────────────────────────────────────────────────── */
    --success-100:  #D1FAE5;
    --success-500:  #10B981;
    --warning-100:  #FEF3C7;
    --warning-500:  #F59E0B;
    --danger-100:   #FEE2E2;
    --danger-500:   #EF4444;

    /* ── Canal ───────────────────────────────────────────────────── */
    --channel-wa:       #25D366;     /* WhatsApp oficial */
    --channel-wa-dark:  #128C7E;

    /* ── Burbuja del bot en chat (Inbox) ──────────────────────── */
    --bot-bubble-bg:     #F0FDF4;
    --bot-bubble-border: #BBF7D0;
    --bot-bubble-text:   var(--text);

    /* ── Roles ───────────────────────────────────────────────────── */
    --role-owner-bg:    #FEF3C7;  --role-owner-fg:    #92400E;
    --role-admin-bg:    #DBEAFE;  --role-admin-fg:    #1E40AF;
    --role-agent-bg:    #D1FAE5;  --role-agent-fg:    #065F46;
    --role-viewer-bg:   #F3F4F6;  --role-viewer-fg:   #4B5563;

    /* ── Bordes ──────────────────────────────────────────────────── */
    --border-subtle:    #F3F4F6;
    --border:           #E5E7EB;
    --border-strong:    #D1D5DB;

    /* ── Radios ──────────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* ── Sombras ─────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 24px -4px rgba(0,0,0,0.10), 0 4px 8px -2px rgba(0,0,0,0.04);

    /* ── Spacing scale ───────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ── Tipografía (escala única) ───────────────────────────────── */
    --fs-xs:    11px;
    --fs-sm:    12px;
    --fs-base:  13px;
    --fs-md:    14px;
    --fs-lg:    16px;
    --fs-xl:    18px;
    --fs-2xl:   22px;
    --fs-3xl:   28px;

    --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, "Cascadia Mono", monospace;

    /* ── Layout ──────────────────────────────────────────────────── */
    --sidebar-w:           232px;
    --sidebar-w-collapsed: 56px;
    --topbar-h:            56px;

    /* ── Animación ───────────────────────────────────────────────── */
    --sb-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:      150ms ease-out;
    --ease-in:       150ms ease-in;

    /* ── Breakpoints (referencia para JS — CSS usa @media directo) ─ */
    --bp-sm: 640px;
    --bp-md: 900px;
    --bp-lg: 1200px;
}

/* ────────────────────────────────────────────────────────────────────
   Modo oscuro
   ──────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg-base:        #111827;
    --bg-subtle:      #1F2937;
    --bg-muted:       #374151;

    --text:           #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary:  #9CA3AF;
    --text-muted:     #9CA3AF;
    --text-faint:     #6B7280;

    --accent-50:      #1E3A5F;
    --accent-100:     #1E3A8A;

    --border-subtle:  #374151;
    --border:         #374151;
    --border-strong:  #4B5563;

    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.35);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.45);
    --shadow-lg: 0 10px 24px -4px rgba(0,0,0,0.45), 0 4px 8px -2px rgba(0,0,0,0.35);

    --role-owner-bg: #4D3A12;  --role-owner-fg: #FCD34D;
    --role-admin-bg: #1E3A8A;  --role-admin-fg: #93C5FD;
    --role-agent-bg: #064E3B;  --role-agent-fg: #6EE7B7;
    --role-viewer-bg: #374151; --role-viewer-fg: #9CA3AF;

    /* Burbuja bot en dark — verde apagado con buen contraste */
    --bot-bubble-bg:     rgba(16, 185, 129, 0.16);
    --bot-bubble-border: rgba(16, 185, 129, 0.40);
    --bot-bubble-text:   #D1FAE5;
}